React で onClick イベントに値を渡すにはどうすればよいですか?

React js: onClick イベントに値を渡す

React では、onClick イベント値のプロパティにアクセスするのが難しく、「SyntheticMouseEvent {...}」のようなコンソール メッセージが表示されることがあります。目的の値の代わりに。これは、React のイベント処理メカニズムを理解し、適切な手法を採用することで解決できます。

簡単な方法

アロー関数を使用して onClick イベントに値を渡すには、次のアプローチに従います。

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

これにより、正しいパラメーターを使用して handleSort を呼び出す新しい関数が作成されます。

より良いWay

最適なパフォーマンスを得るには、onClick 処理をサブコンポーネントに抽出することをお勧めします。こうすることで、ハンドラー参照は変更されず、不要な再レンダリングが回避されます。

サブコンポーネント:

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

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