react-native - React Native-TextInput的onChange和onChangeText之间的区别

我不确定何时在onChange组件中使用onChangeText和TextInput。我知道onChangeText在回调中接受已更改的文本作为arg，但这就是为什么要使用onChangeText，因为您可以随后在回调中更新状态？

最佳答案

更新26.08.2019

从答案的初始版本开始，TextInput的API已更改，并且下面的答案不再有效。我与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来获取更改值的麻烦。

因此，何时应使用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}}>