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"
    });
  };

因此，当我单击该按钮时，我想关闭以data-dismiss按钮的格式定义的引导程序模式，因为我在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，它具有方便的内置道具来控制模态。

反应动态状态变化不起作用

1 个答案: