React Native - TextInput 的 onChange 与 onChangeText 之间的区别

2024-03-23

我不确定什么时候使用onChange vs onChangeText in a TextInput成分。我知道onChangeText接受更改后的文本作为回调中的参数,但这就是您要使用的原因onChangeText,因为您可以在回调中更新状态?


更新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}}>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native - TextInput 的 onChange 与 onChangeText 之间的区别 的相关文章

随机推荐