如何在 React JS 中高效地将值传递给 onClick 事件处理程序？

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中文网其他相关文章！