React Native Klartext mehrere TextInput-Felder

Ich fand Beispielcode auf einem Facebook React Native-Seite, die zeigt, wie SetNativeProp verwendet, um Text mit einem Klick zu löschen, aber ich kann nicht sehen, wie es mit mehreren Textfeldern zu tun. Hier ist der Code:React Native Klartext mehrere TextInput-Felder

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

Der Schiedsrichter scheint so in der Funktion festgelegt wird immer das gleiche TextInput- Feld Ziel. Wie kann ich die Funktion ändern, um auf eine TextInput-Box zu zielen, die ich anzeige?

Quelle

2015-11-22 Hasen

Dies sollte funktionieren. Beachten Sie, dass der Verweis auf dem TextInput derjenige sein muss, den Sie aus dem clearText-functino aufrufen.

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

Meine Antwort aktualisiert, um verschiedene Felder zu löschen.

Quelle

2015-11-22 09:28:54 eyal83

Aber Ihre onPress hat keine Werte? Wie würden Sie es von einem anderen onPress unterscheiden, um einen anderen Textinput zu löschen? Sie müssten immer noch zwei separate Funktionen erstellen. Können Sie ein Beispiel mit zwei Textinputs und zwei touchableopacity Buttons zeigen, um zu demonstrieren, wie es mit nur einer Funktion funktionieren würde? – Hasen

aktualisiert meine Antwort entsprechend. – eyal83

Ok sieht aus wie es entlang der richtigen Linie ist, aber nicht wirklich funktioniert. Hat es bei dir funktioniert? – Hasen

Sie können auch so etwas verwenden, um den Text von TextInput zu löschen.

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

Quelle

2017-01-24 03:45:23 roy

React Native Klartext mehrere TextInput-Felder

Antwort

Verwandte Themen