CODEWITHSUNDEEP
reactjs
PericlesTheo
PericlesTheo

Reputation: 2469

Modals with React

I haven't managed to wrap my head around how to make use of existing modal libraries with React. For reference, I'm using the awesome 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>
  );
}

The modal opens up just fine. However, the binding on the onSubmit doesn't work. At first, I thought I'm doing something wrong. I added an onClick handler somewhere in the modal.js.jsx but still nothing would fire.

The interesting part is that, if I executed the binding immediately it worked, as in <form onSubmit={this.handleSubmit()}>. Which means that React fine up to the point that I actually open() the modal.

Is there a simple solution/example for modals and React?

Upvotes: 1

Views: 774

Answers (1)

Pradeep Potnuru
Pradeep Potnuru

Reputation: 768

The interesting part is that, if I executed the binding immediately it worked, as in . Which means that React fine up to the point that I actually open() the modal.

This happened because you explicitly added the click event once the modal actually placed in DOM. I think the solution could be in this way. Please add your modal mockup in the component.js.jsx like - 

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

Then hide the modal mockup with CSS(if it is not hided bydefault by remodaljs). Then add your event(handleSubmit) to the ok button or to the form if modal is opened in form.

In openNewModal function instead of remodal the modal just open the modal.

Modal mockup is copied from remodal example. Do replace with your requirement.To be true i didn't have knowledge on remodal but i do faced the same problem while using the bootstrap modal.

Upvotes: 1

Related Questions