21

メニュー項目をイベント ハンドラーに接続するのに問題があります。これは、時間の経過に伴う状態の変化を示す UI のモックです。これは (Bootstrap 経由の) ドロップダウン メニューであり、現在の選択を示すルート メニュー項目があります。

[ANN]<click  ...  [ANN]             ...    [BOB]<click  ...  [BOB]  
                    [Ann]                                      [Ann]
                    [Bob]<click + ajax                         [Bob]
                    [Cal]                                      [Cal]

最終的な目標は、ユーザーの選択に基づいてページ コンテンツを非同期的に変更することです。Bob をクリックすると がトリガーされるはずhandleClickですが、そうではありません。

補足として、私は componentDidMount が を呼び出す方法にあまり満足していませんthis.handleClick();が、サーバーから初期メニュー コンテンツを取得する方法としては今のところ機能します。

/** @jsx React.DOM */

var CurrentSelection = React.createClass({
  componentDidMount: function() {
    this.handleClick();
  },

  handleClick: function(event) {
    alert('clicked');
    // Ajax details ommitted since we never get here via onClick
  },
  getInitialState: function() {
    return {title: "Loading items...", items: []};
  },
  render: function() {
    var itemNodes = this.state.items.map(function (item) {
      return <li key={item}><a href='#' onClick={this.handleClick}>{item}</a></li>;
    });

    return <ul className='nav'>
      <li className='dropdown'>
        <a href='#' className='dropdown-toggle' data-toggle='dropdown'>{this.state.title}</a>
        <ul className='dropdown-menu'>{itemNodes}</ul>
      </li>
    </ul>;
  }
});


$(document).ready(function() {
  React.renderComponent(
    CurrentSelection(),
    document.getElementById('item-selection')
  );
});

私は、javascript スコープについてのぼんやりした理解が原因であることをほぼ確信していますが、これまでに試したことはすべて失敗しました (小道具を介してハンドラーを渡そうとすることを含む)。

4

2 に答える 2

40

問題は、無名関数を使用して項目ノードを作成していることであり、その内部でthisはwindow. 修正は.bind(this)、無名関数に追加することです。

var itemNodes = this.state.items.map(function (item) {
  return <li key={item}><a href='#' onClick={this.handleClick}>{item}</a></li>;
}.bind(this));

または、コピーを作成しthisて代わりに使用します。

var _this = this, itemNodes = this.state.items.map(function (item) {
  return <li key={item}><a href='#' onClick={_this.handleClick}>{item}</a></li>;
})
于 2014-01-09T04:52:05.707 に答える