我正在一个网站上工作,目前我有一个用于注销的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
}
);
}
这是一个简单的例子,我在这里使用React钩子而不是类,但你也可以使用类..
主要部分是onClick on container div,如果你运行下面的例子并单击对话框,它将不会关闭它,但点击覆盖将会。
容器div上的e.stopPropagation()
可以阻止触发叠加上事件的内容上的事件。而不是使用stopPropagation
,另一种选择是检查覆盖层内的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>
使用反应refs import OutsideClickHandler from 'react-outside-click-handler';
function MyComponent() {
return (
<OutsideClickHandler
onOutsideClick={() => {
alert('You clicked outside of this component!!!');
}}
>
Hello World
</OutsideClickHandler>
);
}
您检查事件的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); }