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

【问题标题】：input with onClick handler in React?在 React 中使用 onClick 处理程序输入？
【发布时间】：2020-09-14 22:01:52
【问题描述】：

由于 change 事件仅在某些浏览器（即 IE）中为 input 触发，仅当焦点丢失时，我的理解是 click 事件是侦听更改的更好方法（参见 @987654321 @)。

但是，当我只向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，但这与上面列出的答案中的建议相冲突。

【问题讨论】：

@RahulSharma 不幸的是，不 - 在我的情况下，它是一个受控组件。
React wraps the browser's native events 提供规范化接口。我可以从 2015 年找到 one Github comment，上面写着以下内容："... react 使用本机点击事件来监听用户与收音机的交互，然后调用 onchange 进行输入。原因（在至少根据代码中的注释）是因为 IE8 在模糊之前不会触发更改事件......” - 所以听起来这可能已经被处理了。你试过了吗？
您在使用更改（例如您在问题中发布的问题中基于反应的答案）时遇到了哪些具体问题？ stackoverflow.com/a/56632316/5059657
查看React's code，在我看来，您提到的带有IE 的边缘情况已经被处理，并且onChange 的行为就像您在现代浏览器上所期望的那样。除非您可以自己测试，否则我只会使用onChange 而不是自己担心。
好的，请稍等！

标签： javascript html reactjs frontend dom-events

【解决方案1】：

React 提供了一个名为 SyntheticEvent 的跨浏览器包装器，以提供事件的规范化接口，但文档没有明确说明哪些情况已处理或未处理。关于 IE 的边缘情况，2015 年的this Github comment 表明它已经被处理：

...react 使用原生点击事件来监听用户与收音机的交互，然后调用 onchange 进行输入。其原因（至少根据代码中的注释）是因为 IE8 直到 blur 才触发 change 事件，所以为了与 IE8 '兼容'，使用了 click 事件。

看着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 中打开一个新问题）。

【讨论】：