有一个<div>
和几个嵌套的 <input>
秒。 onBlur
每次用户点击 <input>
之一时触发s.
这有点令人沮丧 onBlur
当我撞到 div
里面的东西时会发生这种情况.经过一个小时的搜索,我仍然找不到任何好的解决方案。
这个代码示例展示了我在说什么:
class Thing extends React.Component {
handleBlur(e) {
console.log('blur');
}
handleFocus(e) {
console.log('focus');
}
render() {
return (
<div onFocus={this.handleFocus} onBlur={this.handleBlur} tabIndex="1">
<div>
<input type="text" value="Hello," />
</div>
<div>
<input type="text" value="Thing" />
</div>
</div>
);
}
}
您可以尝试使用代码 over here .
但是我的最终目标是制作this thing正常工作。
最佳答案
只需添加我认为是目前最好的解决方案即可。
这通过使用 Node.contains 忽略模糊事件方法来检查元素是否是已经获得焦点的元素的后代。
handleBlur({ currentTarget, relatedTarget }) {
if (currentTarget.contains(relatedTarget)) return;
/* otherwise normal actions to perform on blur */
console.log('blur');
}
handleFocus(e) {
console.log('focus');
}
关于javascript - 如何为具有嵌套输入字段的 div 实现 onBlur/onFocus?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44953099/