更新2019年8月26日
自答案的初始版本以来,TextInput 的 API 已更改,下面的答案不再有效。我已经有两年多没有使用react-native了,所以我无法真正判断哪个版本有这些变化。
关于答案,onChangeText
仍然是一个简单的 prop,它给出每次更改时输入字段的值。
onChange
另一方面,传递一个事件{ nativeEvent: { eventCount, target, text} }
(正如对此答案的评论中提到的)。现在,我无法自信地告诉你,为什么你需要eventCount
and target
。我只能声明,eventCount
每次与您互动时都会增加TextInput
组件(添加字符、删除字符、全部删除、粘贴值)和target
是该 TextInput 字段的唯一整数。和text
与中的值相同onChangeText
所以基本上,我建议使用onChangeText
,作为一个更直接的道具。
如果您想完成旧答案(如下)中的功能,您可以创建自定义组件,该组件包含TextInput
并接收自定义属性并将它们传递给onChange
稍后支持。下面的例子:
const MyTextInput = ({ value, name, type, onChange }) => {
return (
<TextInput
value={value}
onChangeText={text => onChange({ name, type, text })}
/>
);
};
然后在需要使用的时候使用它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}}>
旧答案
onChangeText
基本上是一个简化版本onChange
,这样您就可以轻松使用它,无需经历麻烦event.target.value
以获得改变的值。
那么,什么时候应该使用onChange
什么时候onChangeText
?
如果您的表单简单,文本输入很少,或者逻辑简单,您可以立即使用onChangeText
<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}>
如果您有更复杂的表单和/或在用户更改输入时处理数据有更多逻辑(例如以不同的方式处理文本和数字),那么您最好使用onChange
,因为它为您提供了更大的灵活性。例如:
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}}>