React Native - Разница между onChange vs onChangeText из TextInput

Ответ 1

ОБНОВЛЕНИЕ 26.08.2019

Начиная с начальной версии ответа, TextInput API изменился, и приведенный ниже ответ больше не действителен. Я не работал с Reaction-native уже более 2 лет, поэтому не могу точно сказать, в какой версии произошли эти изменения.

Что касается ответа, onChangeText - все еще простая опора, которая дает любое значение поля ввода при каждом изменении.

onChange, с другой стороны, передает событие с { nativeEvent: { eventCount, target, text} } (как упомянуто в комментарии к этому ответу). Теперь я не могу с уверенностью сказать, зачем вам eventCount и 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}}>