javascript - 如何使用 onClick 事件将参数从列表项传递到函数

Question

我试图从多个列表项传递一个参数，以便在单击时区分它们。

class SettingsGeneral extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form_fields: ["Select option"],
      selectedSetting: "general",
      configSettings: {}
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick({ e }) {
    const { param } = e.target.dataset;
    console.log(param); // e.currentTarget.value would be equivalent
  }

  render() {
    return (
      <ul className="settings-list">
        <li data-param="value" onClick={this.handleClick}></li>
      </ul>
    );
  }
}

使用当前代码，我收到错误:

TypeError: Cannot read property 'target' of undefined

这意味着该值没有发送到 handleClick 函数，我尝试将其记录在控制台中。

我该如何执行此操作以及执行此操作的最佳方法是什么？网上有很多不同的答案。

Answer 1

您可以通过两种方式做到这一点:

1. 传递事件并从其数据集中获取数据:

handleClick(e) {
    const { param } = e.target.dataset;
    console.log(param); // e.currentTarget.value would be equivalent
  }

  render() {
    return (
      <ul className="settings-list">
        <li data-param="value" onClick={this.handleClick}></li>
      </ul>
    );
  }

将值直接传递给 onClick 处理程序:

handleClick(value) {
    console.log(value);
  }

  render() {
    return (
      <ul className="settings-list">
        <li onClick={() => this.handleClick(value)}></li>
      </ul>
    );
  }