React JS で onClick イベントに値を渡す方法は?

React JS の onClick イベントに値を渡す

React の onClick イベント ハンドラーでは、値を直接渡すことができません。クリックすると、コンソールに SyntheticMouseEvent オブジェクトが表示されます。値を効果的に渡すには、次の解決策に従ってください:

簡単な方法

アロー関数を使用します:

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

これにより、必要なパラメーターで handleSort を呼び出す関数が作成されます。

より良い方法

コードをサブコンポーネント:

サブコンポーネント

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)

関数をコンポーネント コンテキストにバインドします:

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

以上がReact JS で onClick イベントに値を渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。