如何正确捕获 React.js 中文本输入的 change/focusOut 事件？答案

【问题标题】：How to correctly catch change/focusOut event on text input in React.js?如何正确捕获 React.js 中文本输入的 change/focusOut 事件？
【发布时间】：2016-10-03 04:55:58
【问题描述】：

我有一个表单，我想在其中处理文本输入上的 change 事件，但是 React onChange 在 key down 上触发（与原生 JS 相反，它会在输入字段失焦时触发 change 事件。

有没有React 方式来做我想做的事？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果您只想在输入失去焦点时触发验证，您可以使用onBlur。

React 使用 onFocus 和 onBlur 代替 onFocusIn 和 onFocusOut。所有 React 事件都被标准化为冒泡，因此 React 不需要/支持 onFocusIn 和 onFocusOut。 2

【讨论】：

非常感谢。这就是我需要的。我只是无法在 React 中找到有关“focusOut”的内容
那么我们不能在用 react 填充的输入中使用值
不确定你的意思@ThilinaSampath
不清楚你在说什么，在受控输入的情况下，你不会使用 onBlur 事件为状态赋值，你会使用 onChange ，否则什么都不会改变类型。这是为了触发验证而不是为输入分配值：/
是的，您将使用 onChange 来更新商店中的值，这个问题是关于验证的。没有什么能阻止你使用这两个事件。

【解决方案2】：

它已经很晚了，但值得你花时间，在浏览器级别的 focusin 和 focusout 事件的实现和反应合成 onFocus 和 onBlur 方面存在一些差异。 focusin 和 focusout 实际上会冒泡，而 onFocus 和 onBlur 不会。因此，到目前为止，对于 react 的 focusin 和 focusout 没有完全相同的实现。无论如何，onFocus 和 onBlur 将涵盖大多数情况。

【讨论】：

这里的“泡沫”到底是什么意思？

【解决方案3】：

您需要小心，因为onBlur 在 IE11 中有一些警告（How to use relatedTarget (or equivalent) in IE?、https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget）。

然而，据我所知，没有办法在 React 中使用 onFocusOut。如果您需要更多信息，请参阅他们的 github https://github.com/facebook/react/issues/6410 上的问题。（请参阅下面的更新）

更新：

从 React 17 开始，事件已更新 - 请参阅 PR for use focusin/focusout for onFocus/onBlur。然而正如the page listing breaking changes 提到的那样：

虽然 React 17 在 onFocus 事件的底层从焦点切换到焦点，但请注意，这并没有影响冒泡行为。在 React 中，onFocus 事件总是冒泡，并且在 React 17 中继续这样做，因为通常它是一个更有用的默认值。请参阅此沙盒，了解您可以为不同的特定用例添加的不同检查。

【讨论】：