I'm not sure when to use onChange
vs onChangeText
in a TextInput
component. I know onChangeText
accepts the changed text as an arg in the callback, but is that why you would use onChangeText
, since you can then update state within the callback?
TextInput is a Core Component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.
“The difference is that the onInput event occurs immediately after the value of an element has changed, while onChange occurs when the element loses focus, after the content has been changed. The other difference is that the onChange event also works on <select> elements.
The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.
UPDATE 26.08.2019
Since the initial version of the answer, TextInput's API has changed, and answer below is no longer valid. I haven't worked with react-native for more than 2 years now, so I can't really tell which version had these changes.
Regarding the answer, onChangeText
is still a simple prop, that gives whatever is the value of the input field on every change.
onChange
on the other hand, passes an event with { nativeEvent: { eventCount, target, text} }
(as mentioned in the comment to this answer). Now, I cannot tell with confidence, why do you need eventCount
and target
. I can only state, that eventCount
is increased every time you interact with TextInput
component (character added, removed, all deleted, value pasted) and target
is a unique integer for that TextInput field. And text
is the same value as in onChangeText
So basically, I would suggest to use onChangeText
, as a more straight forward prop.
If you want to accomplish functionality like in the old answer(below), you can create custom component, that wraps TextInput
and receives custom properties and passes them to the onChange
prop later. Example below:
const MyTextInput = ({ value, name, type, onChange }) => { return ( <TextInput value={value} onChangeText={text => onChange({ name, type, text })} /> ); };
And then use it whenever you need to use TextInput
handleChange(event) { const {name, type, text} = event; let processedData = text; if(type==='text') { processedData = value.toUpperCase(); } else if (type==='number') { processedData = value * 2; } this.setState({[name]: processedData}) } <MyTextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}> <MyTextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>
OLD ANSWER
onChangeText
is basically a simplified version of onChange
, so you can easily use it, without the hassle of going through event.target.value
to get changed value.
So, when should you use onChange
and when onChangeText
?
If you have simple form with few textinputs, or simple logic, you can go straight away and use onChangeText
<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}>
If you have more complicated forms and/or you have more logic in handling data (like handling text differently from number) when user changes input, then you are better of with onChange
, because it gives you more flexibility. For example:
handleChange(event) { const {name, type, value} = event.nativeEvent; let processedData = value; if(type==='text') { processedData = value.toUpperCase(); } else if (type==='number') { processedData = value * 2; } this.setState({[name]: processedData}) } <TextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}> <TextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With