在 React 中使用 onClick 处理程序输入？

Question

由于 change 事件仅在某些浏览器（即 IE）中仅在失去焦点时才会为 input 触发，我的理解是 click 事件是更好的方法监听变化（参见 Getting value of HTML Checkbox from onclick/onchange events ).

但是，当我仅向 react 中的受控 input 元素提供带有 onClick 处理程序的 checked 属性时，它会抱怨:

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 从 2015 年起提供了一个名为 SyntheticEvent to provide a normalized interface to events, but the documentation doesn't explicitly state which cases are or are not handled. Regarding the edge case with IE, this Github comment 的跨浏览器包装器，表明它已经被处理：

... react uses the native click event to listen to user interaction with the radio, and then calls the onchange for the input. The reason for this (at least according to the comment in the code) is because IE8 does not fire the change event until blur, so in order to be 'compatible' with IE8, the click event is used.

看看 React's source，在我看来确实是这样：

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，如果你发现 IE 上的行为不同，我会担心自己做（或者甚至在 React 的 repo 中打开一个新问题）。

在 React 中使用 onClick 处理程序输入？

input with onClick handler in React?

html

javascript

frontend

dom-events

reactjs