为 React Bootstrap 显示的触发器模式 [英] Trigger modal shown for React Bootstrap

问题描述

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: 函数(){返回 { showModal: false };},componentDidMount:函数(){//删除无关代码},关闭:函数(){this.setState({ showModal: false });},打开:函数(){this.setState({ showModal: true });},提交:函数(e){//删除无关代码},渲染:函数(){var Button = ReactBootstrap.Button;var ButtonInput = ReactBootstrap.ButtonInput;var Modal = ReactBootstrap.Modal;返回 (<div><按钮className="右下角20"bsStyle='成功'bsSize='大'onClick={this.open}>创建新人</按钮><Modal id="new-person-modal" show={this.state.showModal} onHide={this.close}><Modal.Header closeButton><Modal.Title>创建一个新人物！</Modal.Title></Modal.Header><模态体><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/>

<按钮输入类型=提交"值=提交"bsStyle="成功"bsSize="大"onSubmit={this.submit}禁用={this.state.disabled}/></表单></Modal.Body></模态>

);}});React.render(<NewPerson url="/person"/>, document.getElementById('person-new'));

我什至试图通过在 jQuery 中做它来破解它，这也不起作用.

知道如何触发显示时"事件吗?我在 react-bootstrap 源中也找不到任何东西.

解决方案

有一个正确的方法来做到这一点:使用 onEntered 事件.

当显示模态的过渡完成时调用此事件.

总共有 6 个转换触发器:

这是他们的工作:

onEnter = 在 Modal 转换之前触发的回调onEntering = 当 Modal 开始转换时触发回调onEntered = 在 Modal 完成转换后触发的回调onExit = 在 Modal 转换出来之前触发的回调onExiting = 模态开始过渡时触发的回调onExited = 在 Modal 完成转换后触发回调

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

http://react-bootstrap.github.io/components.html#modals - I am looking for a way to find the trigger event for 'shown.bs.modal' and not 'show.bs.modal'.

I don't see any documentation on some of the 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 off to the side, which also isn't working.

<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 how to trigger the 'on shown' event? I can't find anything in the react-bootstrap source either.

解决方案

There is a proper way to do this: use the onEntered event.

<Modal
  onEntered  = { function(){ console.log( "Modal is Shown" ) }}
> 

This event is called when the transition which shows the modal is finished.

There are 6 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

At the time of writing, this solution is not documented. I'm submitting a pull request so hopefully they'll update the docs soon.

这篇关于为 React Bootstrap 显示的触发器模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！