在 div 外反应 Javascript onclick [英] React Javascript onclick outside div

问题描述

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

我尝试使用 tabIndex 将焦点放在 div 上，但随后退出选项不再可点击.

Header.js

 import React, { Component } from "react";从react-dom"导入 ReactDOM；class MainHeader 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {退出显示:false};}使成为() {var guiResult = [];如果(this.state.logOutShown){guiResult.push(<div className="登录__覆盖__框架"><div className="User__Login__Overlay"><div className="Login__Content" tabIndex="1" onFocus={this.alerting.bind(this)} onBlur={this.toggleOverlay.bind(this)}>退出</div>

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

);}切换覆盖(){console.log("切换叠加");this.setState({ logOutShown: false});}证实() {console.log("验证:");这个.setState({退出显示:true});}

解决方案

这是一个简单的例子，我在这里使用 React hooks 而不是类，但你也可以使用类..

主要部分是容器 div 上的 onClick，如果您运行下面的示例并单击对话框，它不会关闭它，但单击叠加层会.

容器 div 上的 e.stopPropagation() 用于停止内容上的事件触发叠加层上的事件.除了使用 stopPropagation，另一种选择是检查 target &currentTarget 叠加层内的 onClick..

const {useState} = React;功能叠加(道具){const {内容} = 道具；const [open, setOpen] = useState(true);如果(打开){return 
setOpen(false)}><div onClick={(e) =>{//停止点击到达覆盖层e.stopPropagation();}}className="overlay-container">{内容()}

}返回空；}ReactDOM.render(<React.Fragment>这是要覆盖的一些内容.<br/>用于检测..<叠加内容={()=><div>这是内容，点击这里不会影响叠加</div>}/></React.Fragment>, document.querySelector('#mount'));

.overlay {位置:固定；背景颜色:RGBA(100,100,100,0.5)；左:0；顶部:0；底部:0；右:0；}.overlay-容器{边框:1px纯黑色；背景颜色:白色；位置:绝对；顶部:30px；左:30px；宽度:200px；高度:80px；填充:5px；}

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="mount"></div>

I am working on a website and currently i am having an svg icon for logout. when icon is clicked an overlay is popped up with signout option. when user clicks on signout it should do certain operation and when user clicks outside div overlay should be hidden. i am failing to achieve this.

i tried to give focus to div by using tabIndex but then signout option is not clickable anymore.

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

解决方案

Here is a simple example, I'm using React hooks here instead of classes, but you can use classes too..

The main part is the onClick on the container div, if you run the example below and click on the dialog it won't close it, but clicking on the overlay will.

The e.stopPropagation() on the container div is what stops the events on the contents firing the events on the overlay. Instead of using stopPropagation, another option is checking the target & currentTarget inside the overlay onClick..

const {useState} = React;


function Overlay(props) {
  const {contents} = props;
  const [open, setOpen] = useState(true);
  if (open) {
    return <div className="overlay" onClick={() => setOpen(false)}>
      <div onClick={(e) => {
        //stop clicks getting to the overlay
        e.stopPropagation();
      }}className="overlay-container">
        {contents()}
      </div>
    </div>
  }
  return null;
}


ReactDOM.render(<React.Fragment>
  This is some content to overlay.<br/>
  for testing..
  <Overlay contents={() =>
    <div>This is the contents, clicking here wont effect ovelay</div>
  }/>
</React.Fragment>, document.querySelector('#mount'));

.overlay {
  position: fixed;
  background-color: rgba(100,100,100,0.5);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.overlay-container {
  border: 1px solid black;
  background-color: white;
  position: absolute;
  top: 30px;
  left: 30px;
  width: 200px;
  height: 80px;
  padding: 5px;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="mount"></div>

这篇关于在 div 外反应 Javascript onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！