我正在网站上工作,目前我有一个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
}
);
}
答案 0 :(得分:2)
您可以使用一个编写良好的库,例如: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>
);
}
答案 1 :(得分:1)
这是一个简单的示例,我在这里使用React钩子代替类,但是您也可以使用类。
主要部分是容器div上的onClick,如果您运行以下示例并单击该对话框,则它不会关闭它,但会单击覆盖图。
容器div上的e.stopPropagation()
是阻止内容上的事件触发叠加层上的事件的原因。除了使用stopPropagation
之外,另一种方法是检查重叠式onClick内部的target
和currentTarget
。
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>
答案 2 :(得分:1)
使用react refs https://reactjs.org/docs/refs-and-the-dom.html#creating-refs
您检查事件的target
,并使用它来show/hide
退出按钮。
在安装组件时添加事件侦听器。
componentWillMount() { document.addEventListener("click", this.handleClickOutside, false); }
在安装组件时删除事件侦听器。
componentWillUnmount() { document.removeEventListener("click", this.handleClickOutside, false); }
进行外部检查,就像这样
handleClickOutside(e) {
if(this.submitPopoverRef.contains(e.target)) {
// the click happened in the component
// code to handle the submit button
// submit();
return;
}
// click happened outside the component
// hide the popover
this.handleClick(); // set the state false
}
<div ref={node => this.submitPopoverRef = node}>
... Your code here...
</div>
答案 3 :(得分:0)
基于@keith的答案: 使用React钩子和类: 假设有一个父级和子级div,您希望父级div仅在该点击不在子级div内时处理该点击:
const clickedParent = () => {};
const clickedChild = () => {};
<div onClick={clickedParent}>
<div className="selc-hd-so-remove" onClick={e=> { e.stopPropagation(); clickedChild(); }} > Child Div Clicked</div>
</div>
Parent Div Clicked
</div>