REACT NATIVE - Change state of screen when close i

问题:

When I close the modal, I need to detect that it has been closed to change the state of the parent page. Not being able to change it when I change any property of the state, the modal.

ExpertFeedback.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>
        )
    }
}

When I change feedback.title with TextInput in ExpertFeedback, the Modal opens

回答1:

If you want to 'connect' the Parent and the Child, you'll need to pass a handler, essentially a function as a prop from your Parent to your child.

Example below:

ExpertFeedback.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) }} >