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

React js：向onClick 事件傳遞值

在React 中，訪問onClick 事件值屬性可能具有挑戰性，顯示諸如“SyntheticMouseEvent {...}”之類的控制台訊息而不是期望的值。這可以透過了解 React 的事件處理機制並採用適當的技術來解決。

簡單方法

要使用箭頭函數將值傳遞給onClick 事件，請遵循以下方法：

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

這會建立一個新函數，使用正確的參數調用handleSort。

更好方式

為了獲得最佳效能，建議將 onClick 處理提取到子組件中。這樣，處理程序引用就不會改變，並且可以避免不必要的重新渲染。

子組件：

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}
  />
));}

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