如何将输入字段数据从Modal传递到react-Native中的Container？

Question

这是我正在使用的:

<Modal
    visible = {this.props.visible}
    animationType="slide"
    transparent
    onRequestClose={() => {}} >
         <TextInput 
           style = {styles.inputBox}
           ref = {this.props.destinatinon} />
   </Modal>

在容器中

 <ExampleModal
       destination = {this.state.destination} >
     </ExampleModal>

我不知道如何将数据从Modal传递给Parent Component.任何类型的教程或链接都可以.提前致谢.

Answer 1

我们假设您的模态是单独归档的,/components/MyModal以概括事物.

每次更改输入文本时,您都可以使模态调用成为您通过props传递的函数.这是一个可以使用的简单回调逻辑.

尽量避免使用refs.

import MyModal from '../components/MyModal';
...
class Home extends Component {
  onInputChanged = (changedText) => {
    console.log('This is the changed text: ', changedText);
  }

  render() {
    return (
      <View>
        ...
        <MyModal onInputChanged={this.onInputChanged} .../>
      </View>
    )
  }
}

// components folder
class MyModal extends Component {
  render() {
    return (
      <Modal
        visible = {this.props.visible}
        animationType="slide"
        transparent
        onRequestClose={() => {}} >
           <TextInput 
             style = {styles.inputBox}
             onChangeText={(changedText) => this.props.onInputChanged(changedText)} />
      </Modal>
    )
  }
}

侧注:您可以定义MyModal 无状态以使事情更清晰.