Управление открытием и закрытием многоразовых модалов в React + Redux - PullRequest
Новая
       14

Управление открытием и закрытием многоразовых модалов в React + Redux

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

Я пытаюсь создать модал многократного использования, используя React + Redux, но я не могу правильно управлять открытием и закрытием одного и того же.

Модал должен открываться при нажатии ссылки на родительский компонент инужно закрывать по нажатию кнопки внутри модала.

Question-1 Я пытался использовать React Refs https://reactjs.org/docs/refs-and-the-dom.html и все работало нормально, но подход кажется неправильнымодин согласно документации Refs (или мог быть, что я понимаю это неправильно).Может кто-то пролить свет на это?

Вопрос-2 Я пытался использовать реквизит и состояние, чтобы вызвать открытие и закрытие модели.Каков наилучший способ справиться с этим?Является ли это добавлением функции переключения в parent и использованием ее так, чтобы при каждом щелчке в parent дочерний элемент обновлялся и отображался снова?Как справиться с закрытием в этом случае?

1 Ответ

0 голосов
/ 29 апреля 2019

Вы можете установить модальное свойство в родительском состоянии, чтобы управлять отображением модального окна, и передать ему функцию закрытия в качестве реквизита, которая устанавливает это состояние в false из модального, когда вы хотите переключить его. 

toggleModal() {
  this.setState({
    modal: !this.state.modal
})
}

<Modal show={this.state.modal} close={this.state.toggleModal} />

Соответствующие части модальных: 

  onClose(e) {
      this.props.close && this.props.close(e);
  }

  render() {
    if (!this.props.show) {
      return null;
    }
    return (
      <div
        className="custom-modal"
        id="modal"
      >
        <div className="modal-content">
          <div className="modal-close" onClick={this.onClose}>
            X
          </div>
          {this.props.children}
        </div>
      </div>
    );
  }
...