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中单独归档以概括事物。

每次更改输入文本时，您都可以将Modal调用为通过props传递的函数。这是一个可以使用的简单回调逻辑。

尽量避免使用裁判。

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 stateless以使事情更清晰。

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

1 个答案: