4

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 源中也找不到任何东西。

4

3 回答 3

13

有一种正确的方法可以做到这一点：使用 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

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

于 2016-01-20T13:12:52.333 回答
4

最简单的方法是创建一个非可视组件，该组件将在渲染时调用传递的函数，并在 Modal.Body 内的某个位置渲染该组件：

render: function() {
    //...
    <Modal.Body>
      //...
      <Notifier onShown={this.onModalShown} />
      //...
    </Modal.Body>
    //...
}

更新：这就是 Notifier 组件的实现方式：

var Notifier = React.createClass({
    componentDidMount: function(){
        this.props.onShown();
    },
    render: function() {
        return null;
    }
});
于 2015-08-05T15:50:25.687 回答
1

我也有同样的问题，这就是我尝试过的......

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>

    );
  }
}

由于我使用的是 ES6，所以我采用了类方法。我为模态内容创建了一个容器 div，并提供了一个 ref 属性以供参考。然后在点击标签时，我附加了一个处理程序，该处理程序将在模式出现时触发。在 this.refs 的帮助下，您可以访问模式。希望它可以帮助你。

于 2017-07-03T04:36:40.863 回答