在div外部单击

Question

遇到问题。

我正在制作一个React应用程序，并想实现一个功能

想象一下，我们有一个"X"图标。当我们点击它时，div出现但是，当我们点击div之外的任何位置后，它就会再次隐藏起来。

如何创建这样的功能？

Answer 1

这里有一个非常粗糙的版本：https://codesandbox.io/s/elated-wilbur-wn8e6?file=/src/App.js:0-844

import React from "react";
import "./styles.css";
export default function App() {
const [show_div, setShowDiv] = React.useState(false);
React.useEffect(() => {
window.addEventListener("click", function (event) {
if (event.target.id !== "mydiv" && event.target.id !== "clicker") {
setShowDiv(false);
}
});
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<a href="#" id="clicker" onClick={() => setShowDiv(!show_div)}>
X
</a>
{show_div ? (
<div id="mydiv" className="dima">
This Div is showing
</div>
) : null}
</div>
);
}

显然，这不是一个生产示例，但它会让你开始。

Answer 2

使用window.onclick事件来隐藏它，注意您必须检查事件。target不是您的div或它的子级。

对于根组件上的react-create状态，请在onclick上更改它，然后遍历它的目标子级。像这样：

class MyApp extends React.Component{
constructor(props){
super(props)
this.state = {
DivVisible:false,
}
}
CloseDiv(){
this.setState({DivVisible : false})
}
OpenDiv(){
this.setState({DivVisible : true})
}
setDivVisible(v){
if(v)
this.OpenDiv()
else 
this.CloseDiv()
}
render(){
return <div onClick={() => {this.CloseDiv()}}>
<MyComponent DivVisible={this.state.DivVisible}  
setDivVisible={(v) => { setTimeout(()=>{this.setDivVisible(v)}, 100) } } 
index={this.state.pageIndex}
goto={(i)=>this.goto(i)} />
</div>

}
}//end class

让状态DivVisible和函数setDivVisible走到MyComponent的子级，直到到达目标子级，然后设置如下css样式：

<MyChild  style={{display:props.DivVisible? 'block':'none'}} onclick={)(()=>props.setDivVisiable(true)} />