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

我有一个表单，我想在其中处理文本输入的更改事件，但是React onChange在按下键时触发（与本机JS相反，当输入字段失焦时会触发更改事件）。

有React方式来做我想要的吗？

javascript reactjs

— 亚历克斯·苏斯利亚科夫
source

Answers:

149

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

琐事：React <17监听blur事件，而> = 17监听focusout事件。

— 多米尼克
source

非常感谢。那就是我所需要的。我只是无法在React中找到有关“ focusOut”的信息

— Alex Suslyakov

那么我们就不能在填充了react的输入中使用值

— Thilina Sampath

不知道您的意思是@ThilinaSampath

— 多米尼克

目前尚不清楚您在说什么，在受控输入的情况下，您不会使用onBlur事件为state分配值，而是会使用onChange，否则在您键入时不会有任何变化。这是为了触发验证而不为输入分配值：/

— Dominic

是的，您将使用onChange来更新存储中的值，此问题与验证有关。没有什么可以阻止您同时使用这两个事件。

— 多米尼克

太晚了，但值得您注意，在浏览器级别上，focusin和focusout事件的实现存在一些差异，并且会对合成onFocus和onBlur做出反应。focusin和focusout实际上会冒泡，而onFocus和onBlur不会。因此，到目前为止，对于reactin和focusout还没有完全相同的实现。无论如何，大多数情况将在onFocus和onBlur中涵盖。

— 乔西
source

您需要小心，因为onBlurIE11中有一些警告（如何在IE中使用relatedTarget（或同等功能？？），https：//developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget）。

onFocusOut据我所知，在React中没有任何方法可以使用。如果需要更多信息，请参阅其github https://github.com/facebook/react/issues/6410上的问题。

— kahlan88
source