Как закрыть модальное с помощью handleClick, вне модального? - PullRequest
Новая
       34

Как закрыть модальное с помощью handleClick, вне модального?

0 голосов
/ 28 апреля 2020

На самом деле, я использую isAvatarUserMenuOpen prop в классе UserDataPresentation, чтобы узнать, открыт модал или нет. Я использую это состояние, чтобы создать условие, которое влияет на onClick, чтобы открыть и закрыть модальное окно. Но мне нужно закрыть этот мод с любым кликом, сделанным вне этого модального режима, на самом деле он закрывается только в той же кнопке, которая его открывает.

Я делал handleClick, который добавляет слушателя при открытии модального окна, и когда я щелкаю за пределами модального окна, отображается предупреждение «close de modal!». Мне нужно удалить это предупреждение и найти способ закрыть модальное окно, как это происходит при нажатии и открытии и закрытии модального окна. 

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>
    )
  }
}

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Вы должны быть в состоянии вызвать this.props.closeMenuUserModal() в вашей функции handleClick.

0 голосов
/ 28 апреля 2020

Я сталкиваюсь с этой проблемой довольно часто и всегда делаю следующее.

Я смешиваю css позиционирование и реагирую на хуки, чтобы создать модал. оверлейный элемент div охватывает весь контейнер div, поэтому при щелчке в любом месте контейнера, кроме модального, модальный режим исчезает. z-index: 1 on #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>
...