react-native - React Native - TextInput 的 onChange 与 onChangeText 的区别

Question

我不确定何时使用 onChange对比 onChangeText在 TextInput成分。我知道 onChangeText接受更改的文本作为回调中的参数，但这就是您使用 onChangeText 的原因，因为您可以在回调中更新状态？

Answer 1

2019 年 8 月 26 日更新

从答案的初始版本开始，TextInput 的 API 发生了变化，下面的答案不再有效。我已经超过 2 年没有使用 react-native，所以我无法确定哪个版本有这些更改。

关于答案，onChangeText仍然是一个简单的 Prop ，它在每次更改时给出输入字段的任何值。
onChange另一方面，通过 { nativeEvent: { eventCount, target, text} } 传递事件(如对此答案的评论中所述)。现在，我不能自信地说，你为什么需要 eventCount和 target .我只能说，eventCount每次与 TextInput 互动时都会增加组件(添加、删除、全部删除、粘贴值)和 target是该 TextInput 字段的唯一整数。和 text与 onChangeText 中的值相同

所以基本上，我建议使用 onChangeText ，作为一个更直接的 Prop 。

如果您想完成旧答案(如下)中的功能，您可以创建自定义组件，包装 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 的麻烦获得改变的值(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}}>