阻止外部点击激活盖茨比中的模态 - 在哪里放置"反应-外部点击-处理程序"？

Question

我添加了一个单击处理程序，以便当用户在我的模态之外单击时，它会关闭模态框。我在我的Gatsby项目中使用"react-outside-click-handler".js来实现这一点。

此单击处理程序运行良好，并在开箱即用时关闭模态。但是，如果单击页面上的任意位置(当模式未处于活动状态时(，它也会切换模式以激活。

有人可以指出我正确的方向，如何在保留停用功能的同时停止模式的激活？

也许我可以写一个 if 语句，指定当状态为 false 时，外部点击不会切换模态？

该页面：

export default class Contact extends Component {
  state = {
    modal: false,
  }
  modalToggle = () => {
    this.setState({ modal: !this.state.modal })
  }
  render = () => {
    return (
      <div className="temp_background">
        <div className="work_boxes">
          <OutsideClickHandler onOutsideClick={this.modalToggle}>
            <button
              className="place-order"
              style={{ backgroundImage: `url(${work_screenshot_2})` }}
              onClick={this.modalToggle}
            />
            <Modal onClick={this.modalToggle} status={this.state.modal} />
          </OutsideClickHandler>
        </div>
      </div>
    )
  }
}

模态组件：

export default class Modal extends Component {
  render() {
    return (
      <div>
        <div className="modal" data-status={this.props.status}>
          <div
            className="modal-left"
            style={{ backgroundImage: `url(${work_screenshot_2})` }}
          />
          <div className="modal-right">
            <h2>{this.props.title}</h2>
            <p>{this.props.description}</p>
            <button onClick={this.props.onClick} className="close">
              <span className="fa fa-close">x</span>
            </button>
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

您可以有条件地呈现它，但您还应该在此处查看更明确的函数调用。使用toggleModal调用可能更简洁，但不那么明确是有代价的。

通过两个单独的方法：openModal 和 closeModal ，您可以更清楚地看到代码在做什么。现在，如果单击模式外部，OutsideClickHandler组件会显式关闭模式。这些方法还会检查以确保在进行更改之前打开/关闭模态。

export default class Contact extends Component {
  state = {
    modal: false,
  }
  openModal = () => {
    const { modal } = this.state;
    if (!modal) {
      this.setState({ modal: true })
    }
  }
  closeModal = () => {
    const { modal } = this.state;
    if (modal) {
      this.setState({ modal: false })
    }
  }
  render = () => {
    return (
      <div className="temp_background">
        <div className="work_boxes">
          <OutsideClickHandler onOutsideClick={this.closeModal}>
            <button
              className="place-order"
              style={{ backgroundImage: `url(${work_screenshot_2})` }}
              onClick={this.openModal}
            />
            <Modal onClick={this.closeModal} status={this.state.modal} />
          </OutsideClickHandler>
        </div>
      </div>
    )
  }
}

Answer 2

您可以有条件地渲染它：

render = () => {
    return (
      {this.state.modal ? (<div className="temp_background">
        <div className="work_boxes">
          <OutsideClickHandler onOutsideClick={this.modalToggle}>
            <button
              className="place-order"
              style={{ backgroundImage: `url(${work_screenshot_2})` }}
              onClick={this.modalToggle}
            />
            <Modal onClick={this.modalToggle} status={this.state.modal} />
          </OutsideClickHandler>
        </div>
      </div>) : null }
    )
  }

正如@LMulvey指出的那样，正确的方法是使用单独的打开和关闭处理程序，并且在更复杂的情况下绝对应该这样做。但是对于这个简单的案例，我认为切换是可以的。