如何將參數從列表項傳遞到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：無法讀取未定義的屬性“目標”

這意味着該值未發送到handleClick函數，我嘗試將其記錄在控制台中。

我該如何去做，最好的方法是什么？ 在線上有很多不同的答案。

Answer 1

為了消除錯誤，您需要更改的唯一內容是：

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

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

它像{e}一樣被錯誤地解構，它必須僅在handleClick的參數列表中為e 。

正如Event.target的文檔Event.target ：

Event接口的target屬性是對調度事件的對象的引用。 在事件的冒泡或捕獲階段調用事件處理程序時，它與Event.currentTarget不同。

如果您想進一步銷毀，可以執行以下操作：

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

   // ... further code
}

我希望這有幫助！

Answer 2

您可以通過兩種方式做到這一點：

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

2. 將值直接傳遞給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);
  }