2

反応を使用してアプリをセットアップしようとしていますが、モーダル以外はすべてうまくいっています。次のリンクからこのコードをそのまま使用しましたが、エラーが発生しました。https://github.com/facebook/react/blob/master/examples/jquery-bootstrap/js/app.js

このフィドルhttp://jsbin.com/eGocaZa/1/edit?html,css,output を試してください

コールバック関数は「this」にアクセスできないようです。コンソールに「これ」を記録すると、ウィンドウ オブジェクトが記録されます。

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

私はこれを渡し、機能しているように見える新しい関数を返しましたが、それは正しくないようで、jsfiddleでうまく機能していませんでした。ローカルでモーダルを起動しましたが、閉じる機能で同じ問題に遭遇しました。どんな助けでも大歓迎です。ありがとう！

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 以降、メソッドは自動的にコンポーネントにバインドされます。openModal: React.autoBind(function() { this.refs.modal.open(); })orを React 0.3 で作成することもできonClick={this.openModal.bind(this)}ましたが、0.4 にアップグレードすると、手動でバインドする必要がなくなります。
  3. あなたのモーダルには、hide見えないように見えるクラスがありました。削除したところ、モーダルが表示されるようになりました。現時点では、コードと例でこれが異なる動作をする理由がわかりません。

これが私の作業例jsbinです。モーダルには奇妙な CSS が適用されているように見えますが、React 関連ではないと思うので、ここでは省略します。何か不明な点があればお知らせください。

于 2013-09-19T04:58:14.147 に答える