Реагировать динамическое изменение состояния не просыпается

Question

Предположим, у меня есть состояние, подобное приведенному ниже:

this.state = {
      modal: ""
    };

Затем у меня есть кнопка, подобная приведенной ниже:

          <button
                type="button"
                className="btn btn-primary"
                onClick={this.createUser}
                data-dismiss={this.state.modal}
              > Save
          </button>

Пользователь для создания выглядит примерно так:

 createUser = () => {
    this.setState({

      modal: "modal"
    });
  };

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

Но он работает только во второй кликкнопки сохранения.Зачем?

Кроме того, как я могу перейти на один клик сам?

Answer 1

Установка data-dismiss на modal не закроет сам модал.Второй клик вызывает bootstrap.js и закрывает модал.

Я думаю, что вы хотите получить ссылку на ваш модал, а затем закрыть его с помощью jQuery на клике.Что-то вроде

// in your constructor
this.modalRef = React.createRef();


// class method
clickHandler() {
  this.createUser();
  $(this.ref.current).modal('hide');
}

// render function
return (
  <div id="modal" ref={this.modalRef}>
    ...
  </div>
)

Если вы используете много модальных загрузок, возможно, вы можете рассмотреть возможность использования Reactionstrap , который имеет удобные встроенные реквизиты для управления модальными.