В React какая разница между onChange и onInput?

Question 1

Я попытался найти ответ на этот вопрос, но большинство из них находятся вне контекста React, где onChangeсрабатывает размытие.

Выполняя различные тесты, я не могу сказать, чем отличаются эти два события (применительно к текстовой области). Может кто-нибудь пролить некоторый свет на это?

Question 2

Кажется, нет реальной разницы

React по какой-то причине присоединяет слушателей Component.onChangeк element.oninputсобытию DOM . См. Примечание в документации к формам:

React docs - Формы

Такого поведения удивляет больше людей. Дополнительные сведения см. В этой проблеме в системе отслеживания проблем React:

Документируйте, как onChange в React соотносится с onInput # 3964

Цитата из комментариев по этому поводу:

Я не понимаю, почему React решил заставить onChange вести себя так же, как onInput. Насколько я могу судить, у нас нет возможности вернуть прежнее поведение onChange. Документы утверждают, что это «неправильное название», но на самом деле это не так, он срабатывает, когда есть изменение, но только до тех пор, пока ввод также не теряет фокус.

Для проверки иногда мы не хотим отображать ошибки проверки, пока они не закончат ввод. Или, может быть, мы просто не хотим повторного рендеринга при каждом нажатии клавиши. Теперь единственный способ сделать это - использовать onBlur, но теперь нам также нужно проверить, изменилось ли значение вручную.

Это не такая уж большая проблема, но мне кажется, что React выбросил полезное событие и отклонился от стандартного поведения, когда уже было событие, которое это делает.

Я согласен на 100% с комментарием ... Но я полагаю, что его изменение сейчас принесет больше проблем, чем решит, поскольку уже было написано так много кода, который полагается на это поведение.

React не является частью официальной коллекции веб-API

Несмотря на то, что React построен на основе JS и получил огромное распространение, существует технология React, позволяющая скрыть множество функций под собственным (довольно маленьким) API. Однажды область, где это очевидно, находится в системе событий, где много чего происходит под поверхностью, что на самом деле радикально отличается от стандартной системы событий DOM. Не только с точки зрения того, какие события что делают, но и с точки зрения того, когда данные могут сохраняться на каком этапе обработки события. Вы можете прочитать об этом здесь:

Система событий React

Question 3

Нет никакой разницы

React не имеет поведения события onChange по умолчанию. 'OnChange', который мы видим в реакции, имеет поведение события onInput по умолчанию. Итак, чтобы ответить на ваш вопрос, у них обоих нет разницы в реакции. Я поднял вопрос о том же на GitHub, и вот что они говорят по этому поводу:

Я думаю, что в то время, когда было принято это решение (~ 4 года назад?), OnInput не работал согласованно между браузерами и сбивал с толку людей, заходящих в Интернет с других платформ, поскольку они ожидали, что событие «изменения» произойдёт. огонь при каждом изменении. В случае React это более серьезная проблема, потому что, если вы не сможете обработать изменения достаточно быстро, контролируемые входные данные никогда не обновятся, что заставляет людей думать, что React сломан. Команда назвала его onChange.

Оглядываясь назад, возможно, было бы лучше использовать polyfill onInput и сохранить его имя, чем изменять поведение другого события. Но этот корабль уже давно отплыл. Мы могли бы пересмотреть это решение в будущем, но я просто рекомендую вам рассматривать его как причуду React DOM (к которой вы довольно быстро привыкнете).

https://github.com/facebook/react/issues/9567

Также эта статья предоставит больше информации. В качестве временного решения проблемы отсутствия onChange по умолчанию в статье предлагается прослушать событие onBlur.

https://www.peterbe.com/plog/onchange-in-reactjs

Question 4

Недавно у меня возникла ошибка, из-за которой onChangeне разрешалось копирование и вставка в поле ввода IE11. В то время как onInputсобытие допускало такое поведение. Я не смог найти никакой документации, которая описывала бы это в документах, но это показывает, что есть разница между ними (ожидаемая или нет).

Question 5

Как вы можете видеть в различных комментариях здесь, React рассматривает onChange и onInput одинаково, и поэтому, а не обсуждает достоинства этого решения. Вот решение.

Используйте onBlur, если вы не хотите обрабатывать правки пользователя, пока они не будут сделаны. :)

Question 6

Для всех, кто наткнулся на эту проблему, ища способ прослушать реальное changeсобытие, основанное на DOM , я сделал это следующим образом (написано на TypeScript):

import { Component, createElement, InputHTMLAttributes } from 'react';

export interface CustomInputProps {
    onChange?: (event: Event) => void;
    onInput?: (event: Event) => void;
}

/**
 * This component restores the 'onChange' and 'onInput' behavior of JavaScript.
 *
 * See:
 * - https://reactjs.org/docs/dom-elements.html#onchange
 * - https://github.com/facebook/react/issues/3964
 * - https://github.com/facebook/react/issues/9657
 * - https://github.com/facebook/react/issues/14857
 */
export class CustomInput extends Component<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'ref'> & CustomInputProps> {
    private readonly registerCallbacks  = (element: HTMLInputElement | null) => {
        if (element) {
            element.onchange = this.props.onChange ? this.props.onChange : null;
            element.oninput = this.props.onInput ? this.props.onInput : null;
        }
    };

    public render() {
        return <input ref={this.registerCallbacks} {...this.props} onChange={undefined} onInput={undefined} />;
    }
}

Пожалуйста, дайте мне знать, если вы видите способы улучшить этот подход или у вас возникнут проблемы с ним. В отличие от blurэтого changeсобытие также запускается, когда пользователь нажимает клавишу ввода, и запускается только в том случае, если значение действительно изменилось.

Я все еще набираюсь опыта с этим CustomInputкомпонентом. Например, странно ведут себя флажки. Мне нужно либо инвертировать event.target.checkedв onChangeобработчике, передавая значение флажку, checkedлибо избавиться от этой инверсии при передаче значения флажку, defaultCheckedно это затем нарушает синхронизацию нескольких флажков, представляющих одно и то же состояние в разных местах на странице . (В обоих случаях я не передавал onInputобработчик флажкам CustomInputfor.)