Question

我还没有设法绕过如何利用React使用现有的模态库。作为参考，我使用了令人敬畏的remodal。

component.js.jsx

openNewModal: function () {
  // The OpenModal component is wrapped around the modal's class which keeps it hidden until we show it here.
  var modal = $(ReactDOM.findDOMNode(this.refs.modal)).remodal();
  modal.open();
}

render: function () {
  return(
    <div onClick={this.openNewModal}>
      <OpenModal ref="modal" />
    </div>
  );
}

modal.js.jsx

handleSubmit: function(e) {
  e.preventDefault();
},

render: function () {
  return(
    <form onSubmit={this.handleSubmit}>
      ...
    </form>
  );
}

模态打开就好了。但是，onSubmit上的绑定不起作用。起初，我以为我做错了什么。我在 modal.js.jsx 中的某处添加了一个onClick处理程序，但仍然没有任何内容会触发。

有趣的是，如果我立即执行绑定，它就会起作用，就像<form onSubmit={this.handleSubmit()}>一样。这意味着React很好地达到了我实际上open()模态的地步。

模态和React是否有一个简单的解决方案/示例？

Answer 1

有趣的是，如果我立即执行绑定它就会起作用，就像在。这意味着React很好，直到我实际打开（）模态。

发生这种情况是因为一旦模态实际放置在DOM中，您就显式添加了click事件。我认为解决方案可能就是这样。请在component.js.jsx中添加模态模型，如 -

render: function () {
  return(
    <div onClick={this.openNewModal}>
      <div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm" onSubmit={this.handleSubmit}>OK</button>
</div>
    </div>
  );
}

然后用CSS隐藏模态模型（如果它没有被remodaljs隐藏）。然后将您的事件（handleSubmit）添加到ok按钮或表单中，如果以表格形式打开模态。

在openNewModal函数而不是remodal中，模态只需打开模态。

从remodal示例复制模态模型。请更换你的要求。如果是真的我没有关于remodal的知识，但我在使用bootstrap模式时遇到了同样的问题。

带有React的模态

1 个答案: