从github上的例子中反应js和bootstrap模态

Question

我正在尝试设置一个带有反应的应用程序,除了我的模态之外,一切都很顺利.我使用了以下链接中的代码,未触及,我收到错误.https://github.com/facebook/react/blob/master/examples/jquery-bootstrap/js/app.js

试试这个小提琴http://jsbin.com/eGocaZa/1/edit?html,css,output

回调函数似乎无法访问"this".如果在控制台中记录"this",则会记录窗口对象.

openModal: function() {
  this.refs.modal.open();
},

我确实通过了这个并返回一个似乎有效的新功能,但这似乎并不正确,并且与jsfiddle不一致.我在本地获得了模态激发,但后来我遇到了与close函数相同的问题.任何帮助,将不胜感激.谢谢!

var Example = React.createClass({
  handleCancel: function() {
    if (confirm('Are you sure you want to cancel?')) {
      this.refs.modal.close();
    }
  },

  render: function() {
    var modal = null;
    modal = (
      <BootstrapModal
        ref="modal"
        confirm="OK"
        cancel="Cancel"
        onCancel={this.handleCancel}
        onConfirm={this.closeModal}
        title="Hello, Bootstrap!">
        This is a React component powered by jQuery and Bootstrap!
      </BootstrapModal>
    );
    return (
      <div className="example">
          {modal}
        <BootstrapButton onClick={this.openModal(this)}>Open modal</BootstrapButton>
      </div>
    );
  },

  openModal: function(obj) {
    return function(){obj.refs.modal.open();}
  },

  closeModal: function() {
    this.refs.modal.close();
  }
});

Answer 1

我发现你的代码存在一些问题:

1. 您在jQuery之前加载了Bootstrap JS,但之后需要加载它.
2. 您使用的是React 0.3.0,它对组件方法有不同的范围规则 - 因为React 0.4,方法会自动绑定到组件.您可以编写openModal: React.autoBind(function() { this.refs.modal.open(); })或onClick={this.openModal.bind(this)}在React 0.3中,但升级到0.4会删除手动绑定的必要性.
3. 你的模态有一个hide似乎使它看不见的类; 我删除了它,现在模态似乎出现了.我现在不确定为什么在代码和示例之间的行为有所不同.

这是我的工作示例:http://jsbin.com/eGocaZa/5/edit.模态似乎有一些奇怪的CSS适用于它但我不认为这是与React相关所以我会留在这里.如果有什么不清楚,请告诉我.