http://react-bootstrap.github.io/components.html#modals-我正在寻找一种方法来查找“ shown.bs.modal”而不是“ show.bs.modal”的触发事件。
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'));
我什至试图通过仅在jQuery中进行修改来破解它,这也无法正常工作。
<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>
任何想法如何触发“显示”事件?我也没有在react-bootstrap源代码中找到任何东西。
有一种正确的方法:使用onEntered事件。
<Modal onEntered = { function(){ console.log( "Modal is Shown" ) }} >
当显示模态的过渡完成时,将调用此事件。
共有6个转换触发器:
<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 " ) }} >
他们的工作如下:
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
在撰写本文时,此解决方案尚未记录。我正在提交请求请求,因此希望他们会尽快更新文档。