javascript - 在 div 之外 react Javascript onclick

Question

我正在一个网站上工作，目前我有一个用于注销的 svg 图标。 单击图标时，会弹出一个带有注销选项的叠加层。当用户单击注销时，它应该执行某些操作，当用户单击外部 div 覆盖时，它应该被隐藏。我没能做到这一点。

我试图通过使用 tabIndex 将焦点放在 div 上，但是注销选项不再可点击。

Header.js

 import React, { Component } from "react";
    import ReactDOM from "react-dom";
    class MainHeader extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          logOutShown: false
        };
      }
    render() {
    var guiResult = [];
    if (this.state.logOutShown) {
      guiResult.push(
        <div className="Login__Overlay__Frame">
          <div className="User__Login__Overlay">
          <div className="Login__Content" tabIndex="1" onFocus={this.alerting.bind(this)} onBlur={this.toggleOverlay.bind(this)}>Signout</div>
          </div>
        </div>
      );
    }

    return (
            <div className="Header__Icon">
              <div className="Icons__Log__In" tabIndex="0" onClick={this.validate.bind(this)} onBlur={this.toggleOverlay.bind(this)}/>
              {guiResult}
            </div>
    );
  }

  toggleOverlay(){
    console.log("toggle overlay");
    this.setState({ logOutShown: false});
  }

  validate() {
    console.log("validate:");
    this.setState(
      {
        logOutShown: true
      }
    );
  }

Answer 1

您可以使用这样一个编写良好的库:react-outside-click-handler

例子:

import OutsideClickHandler from 'react-outside-click-handler';

function MyComponent() {
  return (
    <OutsideClickHandler
      onOutsideClick={() => {
        alert('You clicked outside of this component!!!');
      }}
    >
      Hello World
    </OutsideClickHandler>
  );
}

编辑:

当我今天编辑此评论时，许多新库将此功能引入您的代码。

如果您使用组件库，请检查其中是否存在实用程序。 ( chakra , mantine , material-ui )。

其他解决方案存在于钩子(Hook)库中，如 react-use .