UPDATE 08/26/2019
Starting with the initial version of the response, the TextInput API has changed and the answer below is no longer valid. I have not worked with Reaction-native for more than 2 years, so I can’t say for sure in which version these changes occurred.
As for the answer, onChangeText is still a simple prop that gives any input field value with every change.
onChange , on the other hand, passes the event with { nativeEvent: { eventCount, target, text} } (as mentioned in the comment to this answer). Now I can’t say with certainty why you need eventCount and target . I can only say that eventCount incremented every time you interact with the TextInput component (the character is added, deleted, everything is deleted, the value is inserted), and target is a unique integer for this TextInput field. And text has the same meaning as onChangeText
In general, I would suggest using onChangeText as a more direct support.
If you want to perform functionality as in the previous answer (below), you can create a custom component that wraps TextInput and receives custom properties and passes them to onChange props 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 RESPONSE
onChangeText is essentially a simplified version of onChange , so you can easily use it without wasting time looking at event.target.value to get the changed value.
So, when should you use onChange , and when is onChangeText ?
If you have a simple form with few text inputs or simple logic, you can go onChangeText and use onChangeText
<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}>
If you have more complex forms and / or you have more logic in data processing (for example, processing text other than numbers) when the user changes the input, then you are better off using 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}}>