如何在模式外用handleClick关闭模式？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在模式外用handleClick关闭模式？相关的知识，希望对你有一定的参考价值。
实际上，我使用的是 isAvatarUserMenuOpen 捅进 UserDataPresentation 类，以了解模态是否被打开。我使用这个状态来生成一个条件，影响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>
)
答案
你应该能够调用 this.props.closeMenuUserModal() 中的handleClick函数。
另一答案
我经常遇到这样的问题，我总是做以下的事情。
我混合了css定位和react钩子来创建一个模态。overlayer div覆盖了整个div容器，所以当你点击容器中除了模态之外的任何地方时，模态就会消失。z-index:1 on #modal确保模态堆叠在overlayer之上。
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>以上是关于如何在模式外用handleClick关闭模式？的主要内容，如果未能解决你的问题，请参考以下文章