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

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

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

Answer 1

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

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

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

它像{e}一样被错误地破坏了结构，只需要在e的参数列表中使用handleClick。

Event.target的文档说明如下：

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

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

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

   // ... further code
}

我希望这会有所帮助！

Answer 2

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

通过事件并从其数据集中获取数据：

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>
    );
  }

Answer 3

我认为这可行

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

如何将参数从列表项传递到onClick事件

3 个答案: