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