如何在 React 中向 onClick 事件传递值？

在 React 中向 onClick 事件传递值

React 的 onClick 事件处理程序本身不接受参数。当 onClick 被触发时，它会显示没有任何显式值传输的合成事件属性。为了克服这个问题，可以采用多种方法：

箭头函数（简单方法）

箭头函数可用于手动将值传递给 onClick 处理程序：

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 Legacy方法（简单方式）

为了兼容 ES5，以下方法可以使用 .bind 传递值：

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

通过选择最合适的技术，你可以有效地将值传递给 onClick 事件做出反应并避免问题中概述的问题。

以上是如何在 React 中向 onClick 事件传递值？的详细内容。更多信息请关注PHP中文网其他相关文章！