React JS で onClick イベント ハンドラーに効率的に値を渡すにはどうすればよいですか?

React js onClick イベント値の受け渡し

React js イベントを操作する場合、メソッドに値を渡すのが難しい場合があります。この問題は、複数の解決策を検討することで解決します。

1.アロー関数の使用

最も簡単な方法は、アロー関数を利用することです。

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

アロー関数は、適切なパラメータを使用して handleSort を呼び出す新しい関数を作成します。ただし、このアプローチでは毎回新しい関数が生成されるため、不必要な再レンダリングが発生します。

2.サブコンポーネントへの抽出 (推奨)

より良いアプローチは、onClick イベント処理をサブコンポーネントに抽出することです。ハンドラーと値を小道具として受け取るサブコンポーネントを作成します:

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

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

メインコンポーネントで、ハンドラーと値の小道具をサブコンポーネントに渡します:

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

Thisハンドラー参照が決して変更されないようにし、不必要な処理を最小限に抑えます。再レンダリングします。

3. ES5 メソッド (旧)

ES5 を使用している場合は、次のように関数をコンポーネント コンテキストにバインドできます。

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

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