marek marek - 1 month ago 19
React JSX Question

How to hide "react-bootstrap modal" form that has preventDefault() inside its onSubmit?

The problem is that when I do not use preventDefault(), page is reloaded onSubmit and hidden. When preventDefault is used my form is doing what it has in onSubmit, but it is not hiding after submit. When I use other "Close" button that has only

onClick={this.props.onRequestHide}


form is hiding just fine.

How to hide that form when it is done with its onSubmit.

<Modal {...this.props} className="adressModal" bsStyle="primary" title='Adress Form' animation={false}>
<form className="addressModal" onSubmit={this.handleSubmit} >
<div className="modal-body">
<Input type="text" placeholder="Enter Kraj" className="form-control" valueLink={this.linkState('address')} ref="address" hasFeedback required/>
</div>
<div className="modal-footer">
<ButtonGroup>
<Button className="btn btn-default" onClick={this.props.onRequestHide} data-dismiss="modal" active>Close</Button>
<Button bsStyle="primary" className="btn btn-default" type="submit" disabled={this.state.isSubmitting} >Save</Button>
</ButtonGroup>
</div>
</form>
</Modal>


Code is just mix of ModalTrigger example from
http://react-bootstrap.github.io/components.html#modals
and React basic tutorial

http://facebook.github.io/react/docs/tutorial.html.

Answer

You could just call the this.props.onRequestHide function inside of the handleSubmit function

something like this:

handleSubmit: function() {
  /* ... */
  this.props.onRequestHide();
  e.preventDefault();
},
Comments