reactjs - React 中 div 元素的 onBlur

Question

我想在 div 元素离开焦点后执行一个功能。

我在 div 中使用 tabIndex 和 onBlur 函数。当我通过单击 div 内的任何元素手动放置焦点时，它工作正常。但是默认情况下，当在 div 内没有单击任何项​​目时，它不起作用。

我的组件是一个功能组件，div 是动态呈现的，所以我也无法使用 useRef 设置焦点。

const renderHeaderCell = (header, headerKey) => {
    return (
      <div className="DataTable__header-cell-wrapper">
        {filterable ? (
          <IconButton onClick={() => toggleFilterPanel(headerKey)}>
            <i className="material-icons">filter_list</i>
          </IconButton>
        ) : null}
        {activeFilterHeader === headerKey ? (
          <div
            tabIndex={0}
            onFocus={e => {
              console.log("DIV", "focus");
            }}
            onBlur={e => {
              console.log("DIV", "blur");
            }}
            style={{ border: "1px solid blue" }}
          >
            DIV container
            <input
              type="text"
              onFocus={e => {
                console.log("input", "focus");
              }}
              onBlur={e => {
                e.stopPropagation();
                console.log("input", "blur");
              }}
              placeholder="Inside Textbox"
            />
            Click outside
          </div>
        ) : null}
        {sortedByColumn === headerKey ? renderSortIcon() : null}
      </div>
    );
  };

单击图标以显示 DIV 后的代码

  const toggleFilterPanel = headerKey => {
    if (activeFilterHeader === headerKey) {
      setActiveFilterHeader("");
    } else {
      setActiveFilterHeader(headerKey);
      setUniqueItemsForFilter(getUniqueItemsForFilter(rows, headerKey));
    }
  };

调用 onBlur 之后的代码

const onBlur = () => {
    console.log("Blured");
  };

那么我该如何让 onBlur 处理一个 div 元素呢？

下图显示当前焦点

Answer 1

blur事件可能非常棘手，特别是如果您在可聚焦元素中有可聚焦元素。
打开控制台并稍微玩一下那段代码，以便更好地了解“模糊”和“焦点”事件的工作原理。

class BlurExample extends React.Component {
  render() {
    const {title} = this.props;
    return (
      <div
        tabIndex={ 0 }
        onFocus={ () => {console.log('main', 'focus');} }
        onBlur={ () => {console.log('main', 'blur');} }
        style={ { border: '1px solid coral', padding: '10px', fontFamily: 'sans-serif' } }
      >
        Click here 1
        <input
          type="text"
          onFocus={ () => {console.log('input', 'focus');} }
          onBlur={ () => {console.log('input', 'blur');} }
          placeholder="Click here 2"
          style={ { margin: '0 10px', padding: '10px' } }
        />
        Click here 3
      </div>
    );
  }
}
  
ReactDOM.render(
  <BlurExample />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

blur如果您在焦点元素内部单击，则不会发生事件。如果内部有另一个可聚焦元素并单击它，则异常(exception)。但请注意，在 main blur 之后你会看到 input focus和 main focus 如果您在主元素之外单击，您还会看到两个 blur事件: input blur之后 main blur