So übergeben Sie Eingabefelddaten von Modal an den Container in react-Native?

Question

Hier ist, was ich verwende:

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

und im Container

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

Ich weiß nicht, wie Daten aus Modal passieren zur übergeordneten Komponente. Jede Art von Tutorial oder Link ist in Ordnung. Danke im Voraus.

Answer 1

Nehmen wir an, dass Ihr Modal separat in /components/MyModal abgelegt wird, um Dinge zu verallgemeinern.

Sie können Ihren Modal-Aufruf zu einer Funktion machen, die Sie bei jeder Änderung des Eingabetexts an Requisiten übergeben haben. Hier ist eine einfache Callback-Logik, die Sie verwenden können.

Vermeiden Sie Refs so oft wie Sie können.

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

Side Hinweis: Sie können MyModal definieren stateless die Dinge ein wenig sauberer zu machen.