reactjs - 反应动态状态变化没有醒来

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

但是，如果您使用了大量的引导模态，也许您可​​以考虑使用reactstrap，它具有方便的内置道具来控制模态。