显示了React Bootstrap的触发模式

Question

http://react-bootstrap.github.io/components.html#modals-我正在寻找一种方法来查找“ shown.bs.modal”而不是“
show.bs.modal”的触发事件。

我没有看到有关某些引导方式事件的任何文档： 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'));

我什至试图通过仅在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源代码中找到任何东西。

Answer 1

有一种正确的方法：使用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

在撰写本文时，此解决方案尚未记录。我正在提交请求请求，因此希望他们会尽快更新文档。