React Native - TextInput的onChange与onChangeText之间的差异

Question

我不确定何时在组件中使用onChangevs.我知道在回调中接受更改的文本作为arg,但这就是你要使用的原因,因为你可以在回调中更新状态？onChangeTextTextInputonChangeTextonChangeText

Answer 1

onChangeText基本上是一个简化版本onChange,因此您可以轻松使用它,而无需经历{ nativeEvent: { eventCount, target, text} }改变价值的麻烦.

那么,你何时应该使用eventCount何时target？
如果你有简单的形式,几乎没有文字输入或简单的逻辑,你可以直接使用eventCount

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}}>