React JS で onClick イベントに値を渡す方法は?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-28 13:57:12

オリジナル

236 人が閲覧しました

How to Pass Values to onClick Events in React JS?

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 サイトの他の関連記事を参照してください。