Reactネイティブクリアテキスト複数のTextInputボックス

Question

facebookにサンプルコードが見つかりました。ネイティブページは、setNativePropを使用してクリックでテキストをクリアする方法を示していますが、複数のテキストボックスを使用する方法はわかりません。ここでは、コードは次のとおりです。

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

refはそう常に同じのTextInputボックスを対象とする関数で修正されているようです。指定したTextInputボックスを対象にするために関数を変更するにはどうすればよいですか？

Answer 1

これは動作するはずです。 TextInputのrefは、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> 
    ); 
    } 
}); 

私の答えは、別のフィールドをクリアするように更新されました。

Answer 2

また、このような方法でTextInputのテキストをクリアすることもできます。

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