2

我正在尝试设置一个带有反应的应用程序，除了我的模态外，一切都很顺利。我已使用以下链接中的此代码，未触及，但出现错误。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();
  }
});
4

2 回答 2

7

我发现您的代码存在一些问题：

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

这是我的工作示例jsbin。模态似乎应用了一些奇怪的 CSS，但我认为它与 React 无关，所以我将把你留在这里。让我知道是否有任何不清楚的地方。

于 2013-09-19T04:58:14.147 回答
2

当然，我整晚都在研究这个问题，然后在我在这里提出问题后找出答案，但这是解决方案。

需要包装在 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();
})
于 2013-09-19T05:13:30.047 回答