Остановите внешние клики от активации модального режима в Гэтсби - куда поместить 'response-outside-click-handler'?

Question

Я добавил обработчик кликов, чтобы, когда пользователь щелкает за пределами моего модального окна, он закрывал модальное окно.Я использую 'response-outside-click-handler' в моем проекте Gatsby.js для достижения этой цели.

Этот обработчик кликов работает отлично и закрывает модальное окно при клике за пределами поля,Тем не менее, он также переключает модал для активации, если щелкнуть где-нибудь на странице (когда модал не активен).

Может ли кто-нибудь указать мне правильное направление относительно того, как остановить активацию модала при сохранениифункция деактивации?

Возможно, я мог бы написать оператор if, указывающий, что, когда состояние ложно, внешние щелчки не переключают модальный режим?

Страница:

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, правильным способом было бы иметь отдельные обработчики открытия и закрытия, и это определенно должно быть сделано таким образом в более сложных ситуациях. Но для этого простого случая я думаю, что переключение хорошо.