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

Question

有一个 <div> 和几个嵌套的 <input>。 onBlur 每次用户点击其中一个 <input> 时触发。
当我在 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>
    );
  }
}

您可以使用代码 over here。
然而，我的最终目标是让 this thing 正常工作。

Answer 1

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

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

Answer 2

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

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 3

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

Basically, I just check on every blur event if e.relativeTarget has e.currentTarget anywhere in the parentElement chain.

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

Answer 4

只是添加我认为这些天最好的解决方案。

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

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

How to implement onBlur/onFocus for a div with nested input fields?

javascript

reactjs

nested

onblur

onfocus