React Native clear text multiple TextInput boxes

Question

Ho trovato codice di esempio su una pagina Facebook React Native che mostra come utilizzare setNativeProp per cancellare il testo su un clic, ma non riesco a vedere come farlo con più caselle di testo. Ecco il codice:

var App = React.createClass({ 
    clearText() { 
    this._textInput.setNativeProps({text: ''}); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <TextInput ref={component => this._textInput = component} 
       style={styles.textInput} /> 
     <TouchableOpacity onPress={this.clearText}> 
      <Text>Clear text</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}); 

L'arbitro sembra essere fissato in funzione in modo sarà sempre obiettivo la stessa scatola TextInput. Come posso modificare la funzione per scegliere come target qualsiasi casella TextInput che indico?

Answer 1

Questo dovrebbe funzionare. Si noti che il riferimento a TextInput deve essere quello che si chiama dal functino clearText.

var App = React.createClass({ 
    clearText(fieldName) { 
    this.refs[fieldName].setNativeProps({text: ''}); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <TextInput ref={'textInput1'} style={styles.textInput} /> 
     <TouchableOpacity onPress={() => this.clearText('textInput1')}> 
      <Text>Clear text</Text> 
     </TouchableOpacity> 
     <TextInput ref={'textInput2'} style={styles.textInput} /> 
     <TouchableOpacity onPress={() => this.clearText('textInput2')}> 
      <Text>Clear text</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}); 

aggiornato la mia risposta per cancellare campi diversi.

Answer 2

È inoltre possibile utilizzare qualcosa come questo per cancellare il testo di TextInput.

clearText(fieldName) { 
    this.refs[fieldName].clear(0); 
},