Javascript 如何在React+Redux应用程序中单击外部关闭模式窗口？

使应用程序反应+重复使用。里面有几张照片。当你点击一张照片时，你会看到一个带有较大照片和评论的模式窗口

ModalContainer的代码包含模态窗口本身：

class ModalContainer extends Component {
  state = {
    name: '',
    comment: '',
  }

  componentDidMount() {
    const { isOpen, closeModal } = this.props
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    }
    document.addEventListener('click', closeModal)
  }

  componentWillUnmount() {
    const { closeModal } = this.props
    document.body.style.overflow = 'auto'
    document.removeEventListener('click', closeModal)
  }

  inputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  putComment = (e) => {
    e.preventDefault()
    const { comment, name } = this.state
    const { photo } = this.props
    axios
      .post(
        `https://boiling-refuge-66454.herokuapp.com/images/${photo.id}/comments`,
        { name: name, comment: comment, date: Date.parse(String(new Date())) }
      )
      .then((res) => {
        console.log(res)
      })
    this.setState({
      name: '',
      comment: '',
    })
  }

  render() {
    const { name, comment } = this.state
    const { closeModal, photo } = this.props
    const comments = photo.comments
    return (
      <>
        <Modal
          onClick={closeModal}
          src={photo.url}
          comments={comments}
          name={name}
          comment={comment}
          onChange={this.inputChange}
          onSubmit={this.putComment}
        />
      </>
    )
  }
}

export default connect(
  ({ modal }) => ({
    photo: modal.photo,
    isOpen: modal.isOpen,
  }),
  { closeModal }
)(ModalContainer)

如您所见，我有这个代码文档。addEventListener'click'，componentDidMount生命周期方法中的closeModal。括号中包含action creator closeModal，它关闭我的模式。在这种情况下，它不能正常工作，因为即使我在模式中单击，它也会启动action creator。所以我不能在里面添加评论

---

在这种情况下，通过在窗口外单击来关闭模态窗口的正确方法是什么？

一种常见做法是在ModalOverlay中包装模态

将ModalOverlay风格设置为全屏

函数onOverlayClicke{ 闭合模态 e、 停止传播 } modalClick上的函数{ //需要停止传播到ModalOverlay onClick事件 e、 停止传播 } 回来

---

通常的做法是将Modal包装在ModalOverlay中

将ModalOverlay风格设置为全屏

函数onOverlayClicke{ 闭合模态 e、 停止传播 } modalClick上的函数{ //需要停止传播到ModalOverlay onClick事件 e、 停止传播 } 回来 如果模态是一个类组件，您可以将ref添加到它，如果它是一个函数组件，请使用fowardRef

如果模态是一个类组件，您可以将ref添加到它，如果它是一个函数组件，请使用fowardRef

---

那么，在ModalOverlay中返回什么呢？ModalOverlay是一个样式化的元素。您可以用so替换它，在ModalOverlay中返回什么？ModalOverlay是一个样式化的元素。你可以用

<Modal ref={modalNode => (this.modalNode = modalNode)}

handleClick = e => !this.modalNode.contains(e.target) && closeModal();

 componentDidMount() {
    const { isOpen, closeModal } = this.props
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    }
    document.addEventListener('click', this.handleClick)
  }