如何在模态之外用handleClick关闭模态

Question

实际上，我在UserDataPresentation类中使用了isAvatarUserMenuOpen道具，以了解模态是否打开。我使用这个状态来生成一个条件，该条件影响onClick打开和关闭模态。但我需要关闭这个模式，在这个模式之外点击任何按钮，实际上它只在打开它的同一个按钮中关闭

我一直在做一个handleClick，它在打开模态时添加了一个监听器，当我在模态之外单击时，它会显示一个警告"close-de-modal！"。我需要删除这个警报，并找到关闭模态的方法，就像打开和关闭模态的onclick一样

export class UserDataPresentation extends React.Component<Props> {
node: any
componentWillMount() {
document.addEventListener('mousedown', this.handleClick, false)
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClick, false)
}
handleClick = (e: { target: any }) => {
if (!this.node.contains(e.target)) {
alert('close de modal!')
return
}
}
render() {
const { openMenuUserModal, closeMenuUserModal, isAvatarUserMenuOpen } = this.props
return (
<React.Fragment>
<div className="user-data-container" ref={isAvatarUserMenuOpen ? (node) => (this.node = node) : null}>
<div className="text">
<p>Wolfgang Amadeus</p>
</div>
<div className="avatar">
<img src={avatarPhoto} />
</div>
<a href="#" onClick={isAvatarUserMenuOpen ? closeMenuUserModal : openMenuUserModal}>
<div className="svg2">
<SVG src={downArrow} cacheGetRequests={true} />
</div>
</a>
</div>
</React.Fragment>
)
}
}

Answer 1

我经常遇到这个问题，并且总是做以下事情。

我混合了css定位和react钩子来创建一个模态。覆盖层div覆盖了整个div容器，因此当您单击容器中除modal之外的任何位置时，modal都会消失。z索引：#modal上的1确保modal堆叠在上层之上。

const Modal = () => {
const [modal, setModal] = React.useState(false);
return (
<div id='container'>
<button onClick={() => setModal(true)}>toggle modal</button>
{modal && <div id='overlayer' onClick={() => setModal(false)}></div>}
{modal && <div id='modal'>modal</div>}

</div>
);
};
ReactDOM.render(<Modal/>, document.getElementById("react"));

#container{ 
position: relative;
height: 200px; width:200px;
border: 1px solid black;
}
#container * {position: absolute;}
#overlayer{ 
height: 100%; width:100%;
}
#modal{ 
background: blue;
height: 30%; width:30%;
top: 12%; z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

您应该能够在handleClick函数中调用this.props.closeMenuUserModal()。