[解決済み] React jsのonClickはメソッドに値を渡すことができない

質問

onClickイベントの値のプロパティを読みたいです。しかし、クリックすると、コンソールにこのようなものが表示されます。

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

私のコードは正しく動作しています。実行すると、次のように表示されます。 {column} が、onClick イベントで取得できません。

私のコード

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

に値を渡すにはどうすればよいのでしょうか？ onClick イベントへの参加は可能ですか？

解決方法は？

簡単な方法

矢印機能を使用する。

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

を呼び出す新しい関数が作成されます。 handleSort を正しいパラメータで指定します。

ベター・ウェイ

サブコンポーネントに抽出する。 レンダーコールで矢印関数を使用する場合の問題は、毎回新しい関数が作成され、不要な再レンダリングが発生してしまうことです。

サブコンポーネントを作成する場合、引数として handler と use props を渡すことができ、props が変更されたときのみ再レンダリングします（現在 handler の参照は決して変更されないため）。

サブコンポーネント

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

メインコンポーネント

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

オールドイージーウェイ(ES5)

使用方法 .bind を使用して、必要なパラメータを渡します。この方法では、関数をコンポーネントコンテキストと結び付けています。

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);