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

Question

我有一个表单,我想在文本输入上处理更改事件,但React onChange触发键向下(与原生JS相反,当输入字段失焦时触发更改事件).

有没有一种反应方式来做我想要的？

Answer 1

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

Answer 2

JavaScript	反应
onfocusout	onBlur
onfocusin	onFocus

Answer 3

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

Answer 4

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

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

更新：

从 React 17 开始，事件已更新 - 请参阅PR 以使用 focusin/focusout 来实现 onFocus/onBlur。然而，正如列出重大更改的页面提到的：

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