onChange или onBlur, чтобы изменить состояние в ReactJs?

Question

// Предположим, я изменяю state в handleChange функции.

В случае onChange состояние события будет обновлять каждое изменение символа.

  <input
    type="text"
    name="name"
    onChange={this.handleChange}
    id="name"
  />

В случае onBlur состояние события будет обновляться сразу после выхода из полей ввода.

 <input
   type="text"
   name="name"
   onBlur={this.handleChange}
   id="name"
 />

, какой подход лучше всего обновить state в Reactи почему ?

Answer 1

Это на самом деле компромиссное решение.

Я предполагаю, что в вашей функции обработчика событий вы вызываете React setState() для обновления ваших состояний.

Вызов setState является асинхронным.Это создает «ожидающий переход состояния».(Подробнее см. здесь ).Это действительно быстро и имеет редуктор для обновления только измененных узлов.Так что вам не нужно думать о производительности.

• Выберите onChange(): если вам нужно последнее состояние сразу после изменения ввода, например:

Поиск предложений после каждого ввода (например, окно поиска Google)

Проверка ввода после каждого изменения

• Выбор onBlur(): если вам нужно только последнее состояние в конце конечного ввода, например:

Каждое изменение вызывает событие извлечения, которое проверяет, существует ли введенное имя пользователя или адрес электронной почты

---

Также подумайте об этом сценарии:

Ваш пользователь заполнил все 3 регистрационных ввода (имя, пароль, электронная почта), но после последнего ввода электронной почты он / она непосредственно нажал кнопку отправки (при этом ваш метод регистрации запускался без обновления состояния электронной почты).Поскольку setState является асинхронным и еще не обновил состояние электронной почты, у вас могут возникнуть проблемы с нулевым вводом электронной почты.

Итак, мое неофициальное предложение заключается в том, что используйте onChange, когда это возможно, используйте onBlur, когда вам нужно.

Answer 2

Вы можете выбрать любой из методов в зависимости от ваших требований.

Например, если вам нужно выполнить проверку поля во время ввода, вы можете выбрать onChange.

Установка состояния с помощью onChange будет вызываться каждый раз, когда вы вводите что-то в поле, что приводит к повторной визуализации ввода.

onBlur будет вызывать setState, только когда вы фокусируете ввод.

По моему мнению, onBlur был бы хорошим вариантом, но он полностью зависит от того требования, которое у нас есть.