TextInput onChange is not working for me

[jsntghf]

RN: 0.19.0 iOS: 9.2

the value of TextInput is not synchronized with the display text。

my code:

[facebook-github-bot]

Hey jsntghf, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[jsntghf]

if i add multiline={true}, the value of TextInput will synchronized with the display text。

someone can help me?

[gre]

you missed to pass-in text back to the text input.

  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />

See the value prop here

[jsntghf]

@gre it isn't working for me after add value prop

[jayesbe]

I was working on a quick sample react-native program today for Android. A simple TextInput configured as such:

          onChangeText={(text) => this.setState({text})}
          onChange={
            console.log('one')
          }
          onBlur={
            console.log('two')            
          }
          onSubmitEditing={
            console.log('three')
          }
          onEndEditing={
           console.log('four') 
          }

results in

02-19 16:00:31.378 5067-5100/com.test I/ReactNativeJS: one
02-19 16:00:31.378 5067-5100/com.test I/ReactNativeJS: two
02-19 16:00:31.378 5067-5100/com.test I/ReactNativeJS: three
02-19 16:00:31.378 5067-5100/com.test I/ReactNativeJS: four
02-19 16:00:31.643 5067-5100/com.test I/ReactNativeJS: one
02-19 16:00:31.643 5067-5100/com.test I/ReactNativeJS: two
02-19 16:00:31.643 5067-5100/com.test I/ReactNativeJS: three
02-19 16:00:31.643 5067-5100/com.test I/ReactNativeJS: four
02-19 16:00:31.790 5067-5100/com.test I/ReactNativeJS: one
02-19 16:00:31.790 5067-5100/com.test I/ReactNativeJS: two
02-19 16:00:31.790 5067-5100/com.test I/ReactNativeJS: three
02-19 16:00:31.790 5067-5100/com.test I/ReactNativeJS: four

As soon as the TextInput opens the keyboard.. I have a starting value of 'example'
As soon as I remove one letter, all 4 events fire.. Why?
Remove another letter.. all 4 events fire.. ?

It makes no sense to me. I have been trying for 2 hours .. wondering how exactly I am to know just When is a user done entering text. What event can I hook into that will tell me when that happens?

[geirman]

@jsntghf if you're using @gre's example verbatim (copy/paste) it may not have worked for you. Can you try this and let us know whether this is an actual issue?

    <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({input: text})}
        value={this.state.input}
     />

[geirman]

@jayesbe the reason all 4 are executing is because of the way you're executing the console.log, which will fire each time regardless. Try fat arrow like this and you'll see that onEndEditing and onBlur will probably give you what you're looking for.

   <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({input: text})}
          onBlur={(ev) => console.log('onBlur', ev)}
          onEndEditing={(ev) => console.log('onEndEditing', ev)}
          onSubmitEditing={(ev) => console.log('onSubmitEditing', ev)}
          onSelectionChange={(ev) => console.log('onSelectionChange', ev)}
          value={this.state.input}
        />

[geirman]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @geirman says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.