如何在 React JS 中有效率地將值傳遞給 onClick 事件處理程序？-js教程-PHP中文網

如何在 React JS 中有效率地將值傳遞給 onClick 事件處理程序？

Linda Hamilton

發布： 2024-11-28 03:25:11

原創

895 人瀏覽過

How Can I Efficiently Pass Values to onClick Event Handlers in React JS?

React js onClick 事件值傳遞

使用 React js 事件時，將值傳遞給方法可能會很困難。我們將透過探索多種解決方案來解決這個問題。

1.使用箭頭函數

最簡單的方法是使用箭頭函數：

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

登入後複製

箭頭函數建立使用適當參數呼叫handleSort 的新函數。然而，這種方法每次都會產生一個新函數，導致不必要的重新渲染。

2.提取到子組件（建議）

更好的方法是將 onClick 事件處理提取到子組件中。建立一個將handler 和value 作為props 的子元件：

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

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

登入後複製

在主元件中，將handler 和value props 傳遞給子元件：

{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中文網其他相關文章！