如何在 React 中向 onClick 事件傳遞值？-js教程-PHP中文網

如何在 React 中向 onClick 事件傳遞值？

Mary-Kate Olsen

發布： 2024-11-27 00:32:11

原創

1006 人瀏覽過

How Do I Pass Values to onClick Events in React?

在React 中將值傳遞給onClick 事件

在React 中，將值傳遞給onClick 事件可能具有挑戰性，導致意外的控制台輸出。本文探討了解決此問題的兩種方法。

方法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>
);

登入後複製

透過利用這些方法，您可以有效地將值傳遞給 React 應用程式中的 onClick 事件。

以上是如何在 React 中向 onClick 事件傳遞值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！