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

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

React の onClick イベント ハンドラーは、パラメーターをネイティブに受け入れません。 onClick がトリガーされると、明示的な値の転送を行わない合成イベント プロパティが表示されます。これを解決するには、いくつかのアプローチを使用できます。

アロー関数 (簡単な方法)

アロー関数を使用して、値を onClick ハンドラーに手動で渡すことができます。

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 レガシーアプローチ（簡単）方法)

ES5 との互換性のために、次のアプローチでは .bind を使用して値を渡すことができます:

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

最も適切な手法を選択することで、効果的に onClick イベントに値を渡すことができます。対応して、質問に記載されている問題を回避してください。

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