☰

React js onClick はメソッドに値を渡すことができません 質問する

tag-icon • tag-icon javascript reactjs
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>
    );
  }
});

onClickReact js のイベントに値を渡すにはどうすればいいですか?

ベストアンサー1

簡単な方法

矢印関数を使用します。

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

handleSortこれにより、適切なパラメータで呼び出す新しい関数が作成されます。

もっといい方法

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

サブコンポーネントを作成する場合は、ハンドラーを渡し、引数として props を使用できます。これにより、props が変更された場合にのみ再レンダリングされます (ハンドラー参照が変更されなくなるため)。

サブコンポーネント

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>
);

おすすめ記事