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

Posted 2023-02-22

【中文标题】在 React 中使用 onClick 处理程序输入？

【英文标题】：input with onClick handler in React?

【发布时间】：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 在模糊之前不会触发更改事件......” - 所以听起来这可能已经被处理了。你试过了吗？

您在使用更改（例如您在问题中发布的问题中基于反应的答案）时遇到了哪些具体问题？ ***.com/a/56632316/5059657

查看React's code，在我看来，您提到的带有IE 的边缘情况已经被处理，并且onChange 的行为就像您在现代浏览器上所期望的那样。除非您可以自己测试，否则我只会使用onChange 而不是自己担心。

好的，请稍等！

【参考方案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 中打开一个新问题）。