如何通过 onClick 事件将参数从列表项传递给函数答案

【问题标题】：How to pass parameter from list item to function with onClick event如何通过 onClick 事件将参数从列表项传递给函数
【发布时间】：2019-11-25 04:51:23
【问题描述】：

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

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: 无法读取未定义的属性“目标”

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

我该怎么做？最好的方法是什么？网上有很多不同的答案。

【问题讨论】：

您可以通过handleClick(e)访问活动

标签： javascript html reactjs onclick

【解决方案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>
    );
  }

【讨论】：

【解决方案2】：

为了消除错误，您唯一需要更改的是以下内容：

handleClick(e) {
   const { param } = e.target.dataset;

   console.log(param); // e.currentTarget.value would be equivalent
}

像{e}这样被错误地解构了，只能在handleClick的参数列表中是e。

正如Event.target 的文档所述：

Event 接口的 target 属性是对调度事件的对象的引用。在事件的冒泡或捕获阶段调用事件处理程序时，它与 Event.currentTarget 不同。

如果您想进一步解构，您可以执行以下操作：

handleClick({ target }) {
   const { param } = target.dataset;

   // ... further code
}

我希望这会有所帮助！

【讨论】：

【解决方案3】：

我认为这会起作用

  handleClick(e) {
    const { param } = e.target.dataset;
    console.log(param);
  }

【讨论】：