REACT NATIVE - 关闭导入模式时更改屏幕状态

Posted 2023-02-22

【中文标题】REACT NATIVE - 关闭导入模式时更改屏幕状态

【英文标题】：REACT NATIVE - Change state of screen when close import modal

【发布时间】：2019-03-10 18:51:17

【问题描述】：

当我关闭modal时，需要检测到它已经关闭来改变父页面的状态。当我更改状态的任何属性时，无法更改它，模式。

专家反馈.js

import ModalExpertFeedback from './ModalExpertFeedback';

export default class ExpertFeedback extends Component 

   constructor(props) 
      super(props);      

      this.state = 
        modalVisible: false,
        projects: [name:'project0', name:'project1'],
        feedback: title: '', content: '', project_id: ''
      ;
    

    proveProjectIsntNull() 
      if (this.state.feedback.project_id != null)
        this.setModalVisible(true);
       else 
        this.setModalVisible(false);
        Alert.alert('Select a project please');
      
    

    setModalVisible(visible) 
      this.setState(modalVisible: visible);
    

    render() 
        return (
          <View>
            <View>
               <TextInput
                    placeholder="Write title"
                    onChangeText=(feedback_title) => this.setState( prevState => (
                      feedback: 
                          ...prevState.feedback,
                          title: feedback_title
                      ))
                                            
                    value=this.state.feedback.title
               />
               <Picker
                    selectedValue=this.state.feedback.project_id
                    onValueChange=(itemValue, itemIndex) => this.setState( prevState => (
                      feedback: 
                          ...prevState.feedback,
                          project_id: itemValue
                      ))
                    >
                    <Picker.Item label="Select a project" value=null />
                    typeof this.state.projects === 'object' && this.state.projects.length && (this.state.projects.map((project, index) => 
                        return (<Picker.Item label=project.name value=project.id />)
                      ))
                  </Picker>
            </View>
            <ModalExpertFeedback visible=this.state.modalVisible navigation=this.props.navigation feedback=this.state.feedback />
                  <TouchableOpacity
                        onPress=() => 
                          this.proveProjectIsntNull();
                        >
                        <View>
                          <Text>SEND NOW</Text>
                        </View>
                   </TouchableOpacity>
           </View>
    )

    

ModalExpertFeedback.js

export default class ExpertFeedback extends Component 

    feedback = 
      title: "",
      content: "",
      project_id: "",
    ;

    state = 
      modalVisible: false
    ;

    setModalVisible(visible) 
      this.setState(modalVisible: visible);
    

    componentWillReceiveProps(props) 
      this.setState( modalVisible: props.visible);
      this.setState( feedback: props.feedback );
    

    render() 
        return (
              <View>
                <Modal
                  animationType="slide"
                  transparent=true
                  visible=this.state.modalVisible
                  onRequestClose=() =>  console.log('close')  >

                  <View>   
                    <TouchableOpacity
                      onPress=() => 
                        this.setModalVisible(false);
                      
                      >
                      <View>
                        <Text>Close</Text>
                      </View>
                    </TouchableOpacity>
                  </View>
                </Modal>
              </View>
        )
    

当我在 ExpertFeedback 中使用 TextInput 更改 feedback.title 时，Modal 打开

【参考方案1】：

如果您想“连接”父级和子级，则需要传递一个处理程序，本质上是一个函数，作为从父级到子级的道具。

示例如下：

专家反馈.js

    parentHandler(result)
        //do your update here
        this.setState(result);
    

 <ModalExpertFeedback 
    visible=this.state.modalVisible 
    navigation=this.props.navigation 
    feedback=this.state.feedback 
    handler=this.parentHandler.bind(this) />

ModalExpertFeedback.js

      <Modal
          animationType="slide"
          transparent=true
          visible=this.state.modalVisible
          onRequestClose=() =>  this.props.handler(someValue)  >