Я попытался найти ответ на этот вопрос, но большинство из них вне контекста React, где onChange срабатывает при размытии.
При выполнении различных тестов я не могу сказать, как эти два события различны (применительно к текстовой области). Может ли кто-нибудь пролить свет на это?
React по какой-то причине присоединяет слушателей для Component.onChange к событию DOM element.oninput. См. примечание в документации по формам:
Реагировать на документы - формы
Есть больше людей, которые удивлены таким поведением. Для получения дополнительной информации обратитесь к этой проблеме в системе отслеживания проблем React:
Документ, как React onChange относится к onInput # 3964
Цитата из комментариев по этому вопросу:
Я не понимаю, почему React решил, что onChange ведет себя так, как onInput. Насколько я могу судить, у нас нет способа вернуть старое поведение onChange обратно. Документы утверждают, что это "неправильное название", но на самом деле это не так, оно срабатывает, когда происходит изменение, но только до тех пор, пока ввод не потеряет фокус.
Для проверки, иногда мы не хотим показывать ошибки проверки, пока они не закончили печатать. Или, может быть, мы просто не хотим повторного рендеринга при каждом нажатии клавиши. Теперь единственный способ сделать это с помощью onBlur, но теперь мы также должны проверить, что значение изменилось вручную.
Это не так уж важно, но мне кажется, что React выбросил полезное событие и отклонился от стандартного поведения, когда уже было событие, которое делает это.
Я согласен на 100% с комментарием... Но я полагаю, что изменение его сейчас принесет больше проблем, чем решит, поскольку уже написано так много кода, который основан на этом поведении (и он также был скопирован в другие фреймворки, например ПРЕАКТ).
React не является частью официальной коллекции веб-API
Несмотря на то, что React построен на основе JS и получил огромный спрос, так как существует технология React, которая скрывает множество функций под собственным (довольно небольшим) API. Когда-то область, где это очевидно, находится в системе событий, где под поверхностью происходит много всего, что на самом деле радикально отличается от стандартной системы событий DOM. Не только с точки зрения того, какие события делают что-либо, но также с точки зрения того, когда данным разрешено сохраняться на какой стадии обработки события. Вы можете прочитать больше об этом здесь:
У React нет поведения по умолчанию для события onChange. "OnChange", который мы видим в реакции, имеет поведение по умолчанию "onInput". Таким образом, чтобы ответить на ваш вопрос, нет никакой разницы в их реакции. Я поднял вопрос о GitHub относительно того же, и вот что они должны сказать об этом:
Я думаю, что в то время, когда это решение было принято (~ 4 года назад?), OnInput не работал согласованно между браузерами и вводил в заблуждение людей, заходящих в Интернет с других платформ, так как они ожидали, что событие "change" сработает каждое изменение В случае с React это более серьезная проблема, потому что если вы не справитесь с изменениями достаточно быстро, контролируемые входные данные никогда не обновятся, что заставит людей думать, что React не работает. Таким образом, команда пошла с вызовом на изменение.
Оглядываясь назад, можно было бы подумать о том, чтобы лучше заполнить onInput и сохранить его имя, а не изменять поведение другого события. Но этот корабль уже давно отплыл. Мы могли бы вернуться к этому решению в будущем, но я бы посоветовал вам рассматривать его как причуду React DOM (к которой вы довольно быстро привыкнете).
https://github.com/facebook/react/issues/9567
Также эта статья предоставит более глубокое понимание и обходной путь по умолчанию 'onChange'
Недавно я получил ошибку, где onChange не разрешал копировать и вставлять в поле ввода в IE11. Принимая во внимание, что событие onInput позволило бы такое поведение. Я не мог найти документацию, которая описала бы это в документах, но это показывает, что существует разница между двумя (ожидаемыми или нет).
Как вы можете видеть в различных комментариях здесь, React рассматривает onChange и onInput одинаково и так, а не обсуждает достоинства этого решения. Здесь решение.
Используйте onBlur, когда вы не хотите обрабатывать пользовательские изменения, пока они не будут завершены. :)