如何为具有嵌套输入字段的 div 实现 onBlur/onFocus?

Question

有一个<div>和几个嵌套的<input>。 每次用户单击其中一个<input>时都会触发onBlur这
有点令人沮丧，当我在div内击中某些东西时，onBlur发生。经过一个小时的搜索，我仍然找不到任何好的解决方案。
此代码示例显示了我在说的内容：

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>
);
}
}

你可以在这里玩代码。
然而，我的最终目标是使这个东西正常工作。

Answer 1

只是用我认为是当今最好的解决方案来补充这一点。

这将忽略模糊事件，方法是使用 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');
}

Answer 2

您可能希望忽略额外的模糊事件。

handleBlur(e) {
if (e.target.tagName == "INPUT") {
return;
}
console.log('blur');
}
handleFocus(e) {
console.log('focus');
}

Answer 3

如何将输入拆分为单个独立的组件？

app.js

class Thing extends React.Component {
handleBlur(val, event) {
console.log(val, event);
}
handleFocus(val, event) {
console.log(val, event);
}
data = ['Hello, ', 'Thing'];
render() {
return (
<div tabIndex="1">
{this.data.map((v, i) => <Input value={v} key={i} onFocus={this.handleFocus} onBlur={this.handleBlur} />)}
</div>
);
}
}

Input.js

import React from 'react';
export class Input extends React.PureComponent {
handleF = () => {
this.props.onFocus(this.props.value, 'focus');
}
handleB = () => {
this.props.onBlur(this.props.value, 'blur');
}
render() {
return <input type="text" onFocus={this.handleF} onBlur={this.handleB} />;
}
}
export default Input;

https://codesandbox.io/s/J6o5Ey9Jg

Answer 4

这是来自上面的OP评论，他找到了以下对他(现在是我(有效的解决方案，并将其发布在评论中。 我在这里重新发布它，供其他可能不想挖掘评论的人使用。

基本上，我只是检查每个模糊事件，如果 e.relativeTarget 在父元素链中的任何位置都有 e.currentTarget。

https://codesandbox.io/s/vo2opP0Nn?file=/index.js