使用React的模式

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）添加到“確定”按鈕或表單中，如果已在表單中打開模式。

在openNewModal函數而不是重新模態中，模態只是打開模態。

模態模型是從重模示例中復制的。 不要用您的要求代替。說實話，我不了解重整模態，但在使用引導模態時確實遇到了同樣的問題。