Rendern auf TextInput Submit - React Native

Question

In einer nativen App reagiere ich etwas Text und dann ein Texteingabe auf dem Bildschirm gerendert. Ich versuche herauszufinden, wie ich den gleichen Text und den gleichen Textinput ausgeben kann, wenn ich im ursprünglichen Textfeld weitergebe. Ich dachte, dies rekursiv zu tun, aber ich bin mir nicht sicher, wie wo und wie die Funktion implementiert wird.

Answer 1

Wenn es auf demselben Bildschirm ist, können Sie den lokalen Status verwenden. Hier ist das Beispiel

class TestScreen extends Component { 
    constructor(props) { 
    super(props) 
    this. state = { 
     firstInput:'First Input', 
     secondInput:'' 
    } 
    this.submit = this.submit.bind(this) 
    } 

    submit(){ 
    this.setState({ secondInput: this.state.firstInput }) 
    } 


    render() { 
    return (
     <View style={{flex:1,marginTop:40}}> 

     <View> 
      <Text>Text Input #1</Text> 
      <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text)=> this.setState({firstText:text})} 
      value={this.state.firstInput} 
      /> 
      <Button 
       onPress={this.submit} 
       title="Submit" 
      /> 
     </View> 

     <View style={{marginTop:20}}> 
      <Text>Text Input #1</Text> 
      <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      value={this.state.secondInput} 
      /> 
     </View> 
     </View> 
    ); 
    } 
} 

Ich hoffe, dass diese Hilfe. Danke

Answer 2

Perhap können Sie ref, Zustand, bedingte Rendering verwenden. Lassen Sie uns sprechen

const MyInputs = (props) => { 
    inputs =props.inputs 
    result=inputs.map(function(value,index){ 
    return(
     <TextInput key={index} style={styles.input} value={value} /> 
    ) 
    }) 

    return(
    <View> 
     {result} 
    </View> 
) 
} 


class TestScreen extends Component { 
    constructor(props) { 
    super(props) 
    this. state = { 
     inputs:[] 
    } 
    this.submit = this.submit.bind(this) 
    this.clearText = this.clearText.bind(this) 
    } 

    submit(){ 
    let lastInput=this._textInput._lastNativeText 
    let inputs=this.state.inputs 
    this._textInput.setNativeProps({text: ''}); 
    inputs.push(lastInput) 
    this.setState({ 
     inputs:inputs 
    }) 
    } 

    clearText =() => { 
    this.setState({ 
     inputCount: this.state.inputCount + 1, 
    }) 
    this._textInput.setNativeProps({text: ''}); 
    } 

    render() { 
    return (
     <View style={{flex:1,marginTop:40}}> 
     <View> 
      <Text>Text Input #1</Text> 
      <TextInput 
      style={styles.input} 
      ref={component => this._textInput = component} 
      /> 
      <Button onPress={this.submit} title="Submit" 
      /> 
     </View> 

     <MyInputs inputs={this.state.inputs}/> 
     </View> 
    ); 
    } 
}