React Native - TextInput 的 onChange 与 onChangeText 的区别

问题描述

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

I'm not sure when to use onChange vs onChangeText in a TextInput component. I know onChangeText accepts the changed text as an arg in the callback, but is that why you would use onChangeText, since you can then update state within the callback?

推荐答案

UPDATE 26.08.2019

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

Since the initial version of the answer, TextInput's API has changed, and answer below is no longer valid. I haven't worked with react-native for more than 2 years now, so I can't really tell which version had these changes.

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

Regarding the answer, onChangeText is still a simple prop, that gives whatever is the value of the input field on every change.

onChange 另一方面，通过 { nativeEvent: { eventCount, target, text} } 传递事件(如本答案的评论中所述).现在，我不能自信地说，你为什么需要 eventCount 和 target.我只能说，每次与 TextInput 组件(添加、删除、删除所有字符、粘贴值)和 target 交互时，eventCount 都会增加> 是该 TextInput 字段的唯一整数.并且 text 与 onChangeText

onChange on the other hand, passes an event with { nativeEvent: { eventCount, target, text} } (as mentioned in the comment to this answer). Now, I cannot tell with confidence, why do you need eventCount and target. I can only state, that eventCount is increased every time you interact with TextInput component (character added, removed, all deleted, value pasted) and target is a unique integer for that TextInput field. And text is the same value as in onChangeText

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

So basically, I would suggest to use onChangeText, as a more straight forward prop.

如果您想完成旧答案(如下)中的功能，您可以创建自定义组件，该组件包装 TextInput 并接收自定义属性并将它们传递给 onChange 稍后支持.下面的例子:

If you want to accomplish functionality like in the old answer(below), you can create custom component, that wraps TextInput and receives custom properties and passes them to the onChange prop later. Example below:

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> 获取更改后的值.

onChangeText is basically a simplified version of onChange, so you can easily use it, without the hassle of going through event.target.value to get changed value.

那么，什么时候应该使用 onChange，什么时候应该使用 onChangeText?
如果你有简单的表单和很少的文本输入，或者简单的逻辑，你可以直接使用 onChangeText

So, when should you use onChange and when onChangeText?
If you have simple form with few textinputs, or simple logic, you can go straight away and use onChangeText

<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}>

如果您有更复杂的表单和/或在用户更改输入时处理数据(例如处理文本与数字不同)的更多逻辑，那么您最好使用 onChange，因为它提供你更灵活.例如:

If you have more complicated forms and/or you have more logic in handling data (like handling text differently from number) when user changes input, then you are better of with onChange, because it gives you more flexibility. For example:

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 的 onChange 与 onChangeText 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！