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

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.

Но он работает только после 2-го нажатия кнопки сохранения. Зачем?

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

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>
)

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