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

【问题标题】：REACT NATIVE - Change state of screen when close import modalREACT NATIVE - 关闭导入模式时更改屏幕状态
【发布时间】：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 打开

【问题讨论】：

标签： reactjs modal-dialog state native react-props

【解决方案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) }} >

【讨论】：