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

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

React では、onClick イベントに値を渡すのが難しく、予期しないコンソール出力が発生する場合があります。この記事では、この問題を解決する 2 つの方法について説明します。

方法 1: アロー関数を使用する

最も簡単なアプローチは、アロー関数を使用することです。これは、イベント:

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

方法 2: を作成するサブコンポーネント

より構造化された解決策は、onClick イベントを処理するサブコンポーネントを作成することです:

サブコンポーネント (ES6)

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

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

メインコンポーネント(ES6)

return (
  {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>
);

By を使用できます。これらのメソッドを利用すると、React アプリケーションの onClick イベントに効果的に値を渡すことができます。

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