ввод с обработчиком onClick в React?

Question

Поскольку события change запускаются для input только в некоторых браузерах (а именно IE) только при потере фокуса, я понимаю, что событие click - лучший способ отслеживать изменения (см. Получение значения HTML Флажок из событий onclick / onchange ).

Однако, когда я передаю только свойство checked с обработчиком onClick управляемому input элемент в react, он жалуется на:

Warning: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

Какое здесь решение? Документация react, кажется, предлагает использовать onChange, но это противоречит рекомендациям в приведенном выше ответе.

Answer 1

React предоставляет кроссбраузерную оболочку под названием SyntheticEvent для обеспечения нормализованного интерфейса для событий, но в документации не указано явно, какие случаи обрабатываются или не обрабатываются. Что касается крайнего случая с IE, , этот комментарий Github от 2015 года предполагает, что он уже обработан:

... response использует собственное событие щелчка для прослушивания взаимодействия пользователя с радио, а затем вызывает onchange для ввода. Причина этого (по крайней мере, согласно комментарию в коде) заключается в том, что IE8 не запускает событие изменения до размытия, поэтому для обеспечения «совместимости» с IE8 используется событие click.

Глядя на исходный код , мне кажется, что это действительно так:

function shouldUseClickEvent(elem) {
  // Use the `click` event to detect changes to checkbox and radio inputs.
  // This approach works across all browsers, whereas `change` does not fire
  // until `blur` in IE8.
  const nodeName = elem.nodeName;
  return (
    nodeName &&
    nodeName.toLowerCase() === 'input' &&
    (elem.type === 'checkbox' || elem.type === 'radio')
  );
}

Так что я бы просто использовал onChange как вы бы использовали современный браузер и беспокоились о том, чтобы сделать это самостоятельно (или даже открыть новую проблему в репозитории React), если обнаружите, что поведение отличается на IE.