ReactNative TextInput' onChangeText is not called

Question

I want onTextChange to be triggered when I set text to it through state changes. I am building my on screen number keyboard to enter a pin code, and I want to catch text changes on TextInput when user presses these keys.

this.setState({text})

My TextInput looks like this:

<TextInput
  editable={false}
  onChangeText={text => Alert.alert(text)}
  secureTextEntry={true}
  value={this.state.text}

UPD: I found somehow related question, but it too doesn't have an answer: TextInput not working as expected when programmatically entering text

score 2 · Answer 1 · edited May 28 '18 at 06:39

2

You set the editable prop to false then TextInput's text will never change and onChangeText will never call...

edited May 28 '18 at 06:39

Farsheel

610
6
17

answered May 28 '18 at 06:17

Ali SabziNezhad

3,050
1
17
31

The text changes, I checked that. Although when I set editable to true, and change text through system keyboard onChangeText calls works as intended. – madim May 28 '18 at 06:50
so check it too: onChangeText={(text) => {alert(text)}} – Ali SabziNezhad May 28 '18 at 06:55

madim · Accepted Answer · 2018-05-28T09:18:19.517

1

I ended up using onContentSizeChange, which gets called when text changes. I did find that some TextInput methods doesn't work properly when text is set programmatically.

edited May 28 '18 at 09:18

answered May 28 '18 at 08:58

madim

774
10
22

Awesome mate. Thank you so much! – Mark Oct 24 '18 at 21:25
How did you use onContentSizeChange exactly? you can't get the value of text in onContentSizeChange as far as I know. – Lucky_girl May 12 '19 at 20:46
@Lucky_girl As far as I remember I used it to only track changes in TextInput; not to get the value of TextInput – madim May 13 '19 at 13:10

score 1 · Answer 3 · answered Oct 18 '18 at 04:08

I think the event handler function for onChangeText is asynchronous, hence you should use async/await

<Input onChangeText={(val) => { this.changeHandler(val) }} />

and the change handler method should be

changeHandler = async (val) =>{
  await this.setState({
    [someKey]: val
 })
  .
  .
  .
  do other stuff that depends on val
}

it worked for previously to make http request which is fired when input value changes, and uses the input value.

Thang Pham · Answer 4 · 2021-09-21T20:25:56.830

1

Because you didn't bind for it:

onChangeText={text => Alert.alert(text)}

should change:

onChangeText={this.changeFunction.bind(this)}

then add a function:

changeFunction(text){
   alert(text);
}

=> You can test then vote me down if it not work :)

edited Sep 21 '21 at 20:25

answered Sep 21 '21 at 19:30

Thang Pham

71
1
4

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 21 '21 at 19:40

score 0 · Answer 5 · answered May 28 '18 at 06:31

You may use it like below.

class MyComponent extends Component{
  constructor(props){
    super(props)
    this.state = { text: null }   //By default it will be null.
    this._handleChange = this._handleChange.bind(this)  //You need to bind your function here.
  }

  _handleChange(e) {
        const { name, value } = e.target;  //it will destructure your name and value where ever you are using _handleChange method.
        this.setState({
            [name]: value // here we are setting the state dynamically.
        });
        alert(value)
    }

   render() {
     return(
       <View>
         <TextInput
           editable={true}
           onChangeText={this._handleChange}  // this will call _handleChange method.
           secureTextEntry={true}
           value={this.state.text}/>       
       </View>
     )
   }
}

Ali Tooshmalani · Answer 6 · 2018-05-28T07:10:26.760

This code maybe help you:

     this.state = {Alert.alert(
                         'Update available //your Title',
                         'Keep your app up to date to enjoy the latest 
                          features //your Message',
                          [
                            {
                             text: 'Cancel',
                             onPress: () => console.log('Cancel Pressed'),
                             style: 'cancel',
                             }
                           ]
                      )
    }
    <TextInput
      editable={false}
      onChangeText={text => Alert.alert(text)}
      secureTextEntry={true}
      value={this.state.text}
    />

ReactNative TextInput' onChangeText is not called

6 Answers6