React Native clear text multiple TextInput boxes

Question

I found example code on a facebook React Native page which shows how to use setNativeProp to clear text on a click but I can't see how to do it with multiple text boxes. Here is the code:

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

The ref seems to be fixed in the function so will always target the same TextInput box. How can I alter the function to target any TextInput box I indicate?

Eyal Eizenberg · Accepted Answer · 2015-11-23 09:19:56Z

9

This should work. Notice that the ref on the TextInput needs to be the one you call from the clearText functino.

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

Updated my answer to clear different fields.

edited Nov 23, 2015 at 9:19

answered Nov 22, 2015 at 9:28

Eyal Eizenberg

4,0333 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hasen Over a year ago

But your onPress has no values? How would you distinguish it from another onPress to clear a different textinput? You'd still need to create two separate functions. Can you show an example with two textinputs and two touchableopacity buttons to demonstrate how it would work with just the one function?

Hasen Over a year ago

Ok looks like its along the right lines but doesn't actually work. Did it work at your end?

Hasen Over a year ago

You have to do it like this this.refs[fieldName].setNativeProps({text: ''}); and then it works. Thanks :)

Eyal Eizenberg Over a year ago

Yup, had a typo in there. Updated my answer.

Stephen Rauch · Accepted Answer · 2017-01-24 05:07:42Z

1

You can also use something like this to clear the text of TextInput.

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

edited Jan 24, 2017 at 5:07

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Jan 24, 2017 at 3:45

roy

112 bronze badges

Collectives™ on Stack Overflow

React Native clear text multiple TextInput boxes

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related