web-dev-qa-db-ja.com

Reactサブコンポーネントでイベントハンドラを設定する方法

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

_[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のスコープの私の漠然とした理解が非難であることはほぼ肯定的ですが、私がこれまで試してきたすべては失敗しました（小道具を通してハンドラーを渡すことを試みることを含む）。

onclickcomponentshandlerreactjs
21
clozach

問題は、匿名関数を使用してアイテムノードを作成していることです。その内部で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>;
})
40
tungd

「Anna」、「Bob」、「Cal」のタスクの仕様を理解できるので、ソリューションは次のようになります（reactコンポーネントとES6に基づく）。

基本的なライブデモはこちら

import React, { Component } from "react"

export default class CurrentSelection extends Component {
  constructor() {
    super()
    this.state = {
      index: 0
    }
    this.list = ["Anna", "Bob", "Cal"]
  }

  listLi = list => {
    return list.map((item, index) => (
      <li key={index}>
        <a
          name={item}
          href="#"
          onClick={e => this.onEvent(e, index)}
        >
          {item}
        </a>
      </li>
    ))
  }

  onEvent = (e, index) => {
    console.info("CurrentSelection->onEvent()", { [e.target.name]: index })
    this.setState({ index })
  }

  getCurrentSelection = () => {
    const { index } = this.state
    return this.list[index]
  }

  render() {
    return (
      <div>
        <ul>{this.listLi(this.list)}</ul>
        <div>{this.getCurrentSelection()}</div>
      </div>
    )
  }
}
0
Roman