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

Farsheel · Accepted Answer · 2018-05-28 06:39:02Z

2

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

edited May 28, 2018 at 6:39

Farsheel

6106 silver badges17 bronze badges

answered May 28, 2018 at 6:17

Ali SabziNezhad

3,1081 gold badge20 silver badges32 bronze badges

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

2 Comments

madim Over a year ago

The text changes, I checked that. Although when I set editable to true, and change text through system keyboard onChangeText calls works as intended.

Ali SabziNezhad Over a year ago

so check it too: onChangeText={(text) => {alert(text)}}

madim · Accepted Answer · 2018-05-28 09:18:19Z

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, 2018 at 9:18

answered May 28, 2018 at 8:58

madim

80411 silver badges25 bronze badges

2 Comments

Lucky_girl Over a year ago

How did you use onContentSizeChange exactly? you can't get the value of text in onContentSizeChange as far as I know.

madim Over a year ago

@Lucky_girl As far as I remember I used it to only track changes in TextInput; not to get the value of TextInput

Sahil H. Mobidien · Accepted Answer · 2018-10-18 04:08:39Z

1

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.

answered Oct 18, 2018 at 4:08

Sahil H. Mobidien

3813 silver badges5 bronze badges

Comments

Thang Pham · Accepted Answer · 2021-09-21 20:25:56Z

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, 2021 at 20:25

answered Sep 21, 2021 at 19:30

Thang Pham

911 silver badge5 bronze badges

1 Comment

Community Over a year ago

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.

dhivya s · Accepted Answer · 2018-05-28 06:31:23Z

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 · Accepted Answer · 2018-05-28 07:10:26Z

0

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}
    />

edited May 28, 2018 at 7:10

answered May 28, 2018 at 7:04

Ali Tooshmalani

2602 silver badges7 bronze badges

Collectives™ on Stack Overflow

ReactNative TextInput' onChangeText is not called

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related