如何在 React 中管理复合输入组件的 onBlur 事件
How to manage onBlur events for composite input components in react
我正在编写一个 React 组件 (v0.14.7+),它需要在光标离开组件时(通过标签、鼠标单击或触摸事件)调用 onBlur 回调(通过 props 传入)。
挑战在于这个组件有两个输入标签。如果 onBlur 与第一个发生,如果获得焦点的元素是第二个输入标签,我不应该调用 onBlur 处理程序。换句话说,如果焦点位于输入元素的左侧 BOTH,我应该只触发 onBlur。
我正在寻找一个干净的解决方案来解决这个问题,它可以跨浏览器工作,理想情况下只使用 React api/synthetic 事件。 IE。除非我真的必须,否则不看本地事件。我应该怎么做?
请注意,onFocus 事件在 onBlur 事件之后触发,因此我不能仅通过跟踪哪个字段具有焦点来做到这一点。此外,在 onBlur 事件触发时 document.activeElement 似乎 return 文档对象和 而不是 活动元素。
我会使用超时来推迟 hasFocus
(比方说)的更改一段时间。如果有另一次尝试更新 hasFocus
,请清除未决的预定 setState
尝试。卸载组件时不要忘记清除超时
查看工作示例。观察控制台,当从第一个 <---> 秒输入聚焦时,你不会打印 "true" 和 "false"。
我正在编写一个 React 组件 (v0.14.7+),它需要在光标离开组件时(通过标签、鼠标单击或触摸事件)调用 onBlur 回调(通过 props 传入)。
挑战在于这个组件有两个输入标签。如果 onBlur 与第一个发生,如果获得焦点的元素是第二个输入标签,我不应该调用 onBlur 处理程序。换句话说,如果焦点位于输入元素的左侧 BOTH,我应该只触发 onBlur。
我正在寻找一个干净的解决方案来解决这个问题,它可以跨浏览器工作,理想情况下只使用 React api/synthetic 事件。 IE。除非我真的必须,否则不看本地事件。我应该怎么做?
请注意,onFocus 事件在 onBlur 事件之后触发,因此我不能仅通过跟踪哪个字段具有焦点来做到这一点。此外,在 onBlur 事件触发时 document.activeElement 似乎 return 文档对象和 而不是 活动元素。
我会使用超时来推迟 hasFocus
(比方说)的更改一段时间。如果有另一次尝试更新 hasFocus
,请清除未决的预定 setState
尝试。卸载组件时不要忘记清除超时
查看工作示例。观察控制台,当从第一个 <---> 秒输入聚焦时,你不会打印 "true" 和 "false"。