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

【问题标题】：React Native - Difference between onChange vs onChangeText of TextInputReact Native - TextInput 的 onChange 与 onChangeText 之间的区别
【发布时间】：2017-06-07 15:11:54
【问题描述】：

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

【问题讨论】：

标签： react-native

【解决方案1】：

2019 年 8 月 26 日更新

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

关于答案，onChangeText 仍然是一个简单的道具，它给出了每次更改时输入字段的值。

onChange 另一方面，通过{ nativeEvent: { eventCount, target, text} } 传递一个事件（如对此答案的评论中所述）。现在，我不能自信地告诉你为什么需要eventCount 和target。我只能说，每次与 TextInput 组件交互时，eventCount 都会增加（添加、删除、全部删除、粘贴值），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}}>

【讨论】：

据我所知，React Native 的 TextInput 中没有名为 name 的道具。对于反应，这是可以的。 facebook.github.io/react-native/docs/textinput.html
@Shanaka 您可以注入名称...但在 nativeEvent 中也没有属性值。
React Native 中也没有名为 type 的道具，以防有人也在搜索它。
nativeEvent 没有这些属性。 { nativeEvent: { eventCount, target, text} }

【解决方案2】：

像这样使用它：

<Input label='First Name' onChange={this.onChange} value={this.state.first}/>

onChange = (event) => {    
  const {eventCount, target, text} = event.nativeEvent;
  this.setState({first:text});
};

target 属性似乎没用。看起来您不能像在 react 中那样将数据属性附加到 react-native 元素并从目标元素中检索它们，因为该应用程序不是浏览器。

使用 react，我们被告知最好出于性能原因不将内联函数附加到 onChange 事件。我们应该在 HTML 元素上使用自定义 props 或 data-* 属性，并从 onChange 处理程序中的 e.target 检索信息。

但是使用 react-native 似乎这种传递数据的格式实际上是可以接受的：

<Input 
      label='First Name' 
      onChangeText={text=>this.onChange('first',text,'anotherValueIWantToPass')} 
      value={this.state.first}/>

【讨论】：