Trigger modal for React Bootstrap
http://react-bootstrap.github.io/components.html#modals - I am looking for a way to find the trigger event for 'shown .bs.modal' rather than 'show. bs.modal ".
I don't see any documentation on some bootstrap modal events: http://getbootstrap.com/javascript/#modals-events
var NewPerson = React.createClass({
getInitialState: function(){
return { showModal: false };
},
componentDidMount: function() {
// removed irrelevant code
},
close: function(){
this.setState({ showModal: false });
},
open: function(){
this.setState({ showModal: true });
},
submit: function(e) {
// removed irrelevant code
},
render: function() {
var Button = ReactBootstrap.Button;
var ButtonInput = ReactBootstrap.ButtonInput;
var Modal = ReactBootstrap.Modal;
return (
<div>
<Button
className="pull-right bottom-20"
bsStyle='success'
bsSize='large'
onClick={this.open}
>
Create New Person
</Button>
<Modal id="new-person-modal" show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Create a New Person!</Modal.Title>
</Modal.Header>
<Modal.Body>
<form id="new-person-form" onSubmit={this.submit} accept-charset="UTF-8" method="POST" novalidate="novalidate">
<div className="row">
<div className="form-group col-md-12">
<input type="text" className="form-control" id="author" name="author" ref="author" placeholder="Author (First + Last)" required />
</div>
</div>
<ButtonInput
type="submit"
value="Submit"
bsStyle="success"
bsSize="large"
onSubmit={this.submit}
disabled={this.state.disabled} />
</form>
</Modal.Body>
</Modal>
</div>
);
}
});
React.render(<NewPerson url="/person" />, document.getElementById('person-new'));
I even tried to hack it by just doing it in jQuery aside, which doesn't work either.
<script type="text/javascript">
$(document).ready(function() {
$('#new-person-modal').on('shown.bs.modal', function (e) {
console.log('modal displayed');
// now can execute dynamic JS
});
});
</script>
Any idea on how to trigger a showcase event? I can't find anything in react-bootstrap source.
source to share
There is a correct way: use the onEntered event.
<Modal
onEntered = { function(){ console.log( "Modal is Shown" ) }}
>
This event is fired when the transition that shows the modal completes.
There are three transition triggers in total:
<Modal
onExit = { function(){ console.log( "onExit " ) }}
onExiting = { function(){ console.log( "onExiting " ) }}
onExited = { function(){ console.log( "onExited " ) }}
onEnter = { function(){ console.log( "onEnter " ) }}
onEntering = { function(){ console.log( "onEntering" ) }}
onEntered = { function(){ console.log( "onEntered " ) }}
>
Here's what they do:
onEnter = Callback fired before the Modal transitions in
onEntering = Callback fired as the Modal begins to transition in
onEntered = Callback fired after the Modal finishes transitioning in
onExit = Callback fired right before the Modal transitions out
onExiting = Callback fired as the Modal begins to transition out
onExited = Callback fired after the Modal finishes transitioning out
It is not documented at the time of writing this solution. I am submitting a pull request, so hopefully they will update the docs soon.
source to share
The easiest way is to create a non-visual component that will call the passed function on rendering and render that component somewhere inside Modal.Body:
render: function() {
//...
<Modal.Body>
//...
<Notifier onShown={this.onModalShown} />
//...
</Modal.Body>
//...
}
UPDATE: This is how the Notifier component can be implemented:
var Notifier = React.createClass({
componentDidMount: function(){
this.props.onShown();
},
render: function() {
return null;
}
});
source to share
I also had the same problem and this is what I tried ...
Class Modal extends React.Component {
showModal(){
let obj = this.refs.modal;
//write the required code here
}
render() {
return (
<div>
<div className="standard-content">
<p><a className="btn" onClick={this.showModal} data-toggle="modal" data-target="#exampleModal">Modal popup</a></p>
</div>
<div ref="modal" className="modal" id="exampleModal" role="dialog" >
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Header area</h4>
</div>
<div className="modal-body">
body goes here..
</div>
</div>
</div>
</div>
</div>
);
}
}
Since I am using ES6 I went with the class. I created a div container for modal content and gave a ref for the link. Then, when the tag was clicked, I would bind a handler that will fire when the modal appears. With this.refs you can access the modal. Hope this helps you.
source to share