Question

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

Answer 1

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

Answer 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-native元素并像在react中那样从目标元素检索它们，因为该应用程序不是浏览器。

通过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}/>

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

2 个答案: