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

Question

既然某些浏览器（即IE）只有在失去焦点时才会为input触发change事件，那么我的理解是使用click事件监听更改是更好的方法（请参见从onclick/onchange事件中获取HTML复选框的值）。

然而，在react中，当我仅将checked属性与onClick处理程序一起提供给受控input元素时，它会抱怨：

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，但这与上面列出的答案中的推荐不一致。

- Adam Thompson

---

很抱歉，@RahulSharma - 在我的情况下，它是一个受控组件。 - Adam Thompson

React 包装了浏览器的本地事件 以提供一个标准化的接口。我可以找到一条来自Github的评论，它是2015年发布的，其中说道：“... react使用本地的click事件来监听用户与单选框的交互，然后调用输入的onchange事件。这样做的原因（至少根据代码中的注释）是因为IE8直到失焦才会触发change事件......” - 所以看起来这个问题可能已经被处理了。你试过了吗？ - cbr

您在使用类似于您在问题中发布的回答中基于React的变化时遇到了什么具体问题？https://dev59.com/tG855IYBdhLWcg3wNhd1#56632316 - Alexander Staroselsky

看了一下React的代码，我觉得你提到的IE边缘情况已经被处理了，并且onChange在现代浏览器上的行为与你期望的一样。除非你可以自己测试，否则我建议使用onChange而不是自己担心这个问题。 - cbr

@cbr 不错！是的，那很有道理，我也有点怀疑是这样，但找不到相关信息 - 谢谢（你应该留下答案！） - Adam Thompson

当然，给我一秒钟！ - cbr

Answer 1

React提供了一个名为SyntheticEvent的跨浏览器包装器，以提供标准化的事件接口，但文档没有明确说明哪些情况已经处理或未处理。关于IE的边缘情况，这篇来自2015年的Github评论表明它已经得到了处理：

...react使用本地点击事件来监听用户与广播交互，然后调用输入的onchange。这样做的原因（至少根据代码中的注释）是因为IE8直到失焦才会触发更改事件，所以为了与IE8“兼容”，使用了点击事件。

看着React的源码，我觉得这确实是这种情况。

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的存储库中打开一个新问题）。

- cbr