如何在模态之外使用 handleClick 关闭模态？答案

【问题标题】：How to close a modal with a handleClick, outside of the modal?如何在模态之外使用 handleClick 关闭模态？
【发布时间】：2020-04-28 16:36:34
【问题描述】：

其实我在UserDataPresentation类中使用了isAvatarUserMenuOpen prop，来判断modal是否打开。我使用此状态生成影响 onClick 打开和关闭模态的条件。但是我需要通过在此模式之外进行的任何点击来关闭此模式，实际上它只在打开它的同一个按钮中关闭。

我一直在做一个handleClick，它在打开模式时添加一个监听器，当我在模式外点击时，它会显示一个警报“关闭模式！”。我需要删除此警报，并找到关闭模式的方法，就像打开和关闭模式的 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>
    )
  }
}

【问题讨论】：

componentWillMount 已弃用，请改用componentDidMount
或者如果它是一个新项目，只需切换到新版本的 react 并开始使用无状态组件、contextApi 和 Hooks（有史以来最好的组合，即使是任天堂也做不到）。此外，您可以使用 Material-ui 或 Ant Design 之类的东西进行反应，它们为您提供所需的一切:)
谢谢@HermitCrab，我做了改变。

标签： javascript reactjs ecmascript-6 react-redux

【解决方案1】：

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

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

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>

【讨论】：

【解决方案2】：

你应该可以在你的 handleClick 函数中调用this.props.closeMenuUserModal()。

【讨论】：

谢谢！！我知道我只需要一些简单的东西，但我对反应很陌生，我仍然需要一些提示和帮助哈哈哈。谢谢大哥，效果不错。