Modals with React

Question

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?

Hi I had some issues with remodal and React, did you solved your problem? I noticed that remodal mutates DOM structure so that was the reason I couldn't handle events. When you do .remodal(options) in your structure OpenModal DOM element will no longer be a child of the div in your component.js.jsx, it will be moved to a dynamically element created by remodal that will be the last child of 'body' if you use "Inspect Elements" — Sergio Guillen Mantilla
– Sergio Guillen Mantilla, Commented Mar 3, 2016 at 21:55
How I partially solved it was chaning remodal's source code to accept an extra option 'wrapper' that is a jQuery object, so if it's set, remodal should not change the DOM parent of the selected element to be remodal-ed. My only problem is with remodal-bg css class that gives a blur effect. But if I move that blur effect everything works like a charm, Here is my modified version pastebin.com/su3Bbutb changes are on lines 83 and 533-543. I know that it's not a good practice to modify vendor files but it's my partial solution. I think I will PR once it's totally solved. — Sergio Guillen Mantilla
– Sergio Guillen Mantilla, Commented Mar 3, 2016 at 22:06

Pradeep Potnuru · Accepted Answer · 2016-01-09 19:38:41Z

1

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.

answered Jan 9, 2016 at 19:38

Pradeep Potnuru

7666 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pradeep Potnuru Over a year ago

@PericlesTheo have you tried moving the handleSubmit function from modal.js.jsx to component.js.jsx after making the above suggested changes?

Pradeep Potnuru Over a year ago

Strange then it should work! Did u see any errors in console while opening the modal?

Collectives™ on Stack Overflow

Modals with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related