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

javascript twitter-bootstrap-3 reactjs

9898 观看

2回复

736 作者的声誉

我正在尝试设置一个带有反应的应用程序,除了我的模态之外,一切都很顺利。我使用了以下链接中的代码,未触及,我收到错误。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();
  }
});
作者: BrettAHale 的来源 发布者: 2013 年 9 月 19 日

回应 (2)


7

103684 作者的声誉

决定

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

  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似乎使它看不见的类; 我删除了它,现在模态似乎出现了。我现在不确定为什么在代码和示例之间的行为有所不同。

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

作者: Sophie Alpert 发布者: 19.09.2013 04:58

2

736 作者的声誉

当然我整夜都在做这个,然后在我问一个问题之后找出答案,但这是解决方案。

需要将这些函数包装在autoBind中以访问“this”。以下是受影响的功能......

    close: React.autoBind(function() {console.log(this);
    $(this.getDOMNode()).modal('hide');
}),
open: React.autoBind(function() {
    $(this.getDOMNode()).modal('show');
}),
...
handleCancel: React.autoBind(function() {
    if (this.props.onCancel) {
        this.props.onCancel();
    }
}),
handleConfirm:React.autoBind(function() {
    if (this.props.onConfirm) {
        this.props.onConfirm();
    }
})
...
openModal: React.autoBind(function() {
    this.refs.modal.open();
}),
closeModal: React.autoBind(function() {
        this.refs.modal.close();
})
作者: BrettAHale 发布者: 19.09.2013 05:13
32x32