javascript - react OnClick 项目不工作

Question

我有一个 React 组件，它呈现一个带有单独 OnClick 的列表项。

为了找出点击了哪个项目，处理程序接受一个参数。处理程序确实被调用 - 但无论单击哪个项目 - 控制台始终记录 item3(就像单击 item3 一样)。我在这里做错了什么？

class Item {
    constructor(props) {
        super(props);
        this.onItemClickHandler = this.onItemClickHandler.bind(this)
    }

    onItemClickHandler (itemName) {
        console.log("Clicked " + itemName)
    }

    render() {
        this.items = ["item1", "item2", "item3"]
        var lis = []
        for (var liName in this.items) {
            var liName2 = this.items[liName]
            console.log("Adding " + this.items[liName])
            lis.push(<li className="item-ListItem" key={this.items[liName]} onClick={() => this.onItemClickHandler(this.items[liName])}><span><a href="#">{this.items[liName]}</a></span></li>)
        }

        return (
          <div className="item">
            <label className="item-Header"><u>items</u></label>
            <ul className="item-List"> 
            {lis}
            </ul>

          </div>
        );
    }

这一行:

onClick={() => this.onItemClickHandler(this.items[liName])}>

似乎是正确的。

Answer 1

问题是您没有正确捕获 this.items[liName] 的值，因为当您到达第三个项目迭代时，onClick 处理程序将始终将 this.items[liName] 的值设置为第三项。

解决方案是使用闭包来正确捕获值，我编辑了您的代码并在此链接中创建了一个完整的示例

https://codesandbox.io/s/3xrp6k9yvp

下面还写了示例代码和解决方案

class App extends Component {
  constructor(props) {
    super(props);
    this.onItemClickHandler = this.onItemClickHandler.bind(this);
  }

  onItemClickHandler(itemName) {
    console.log("Clicked " + itemName);
  }

  render() {
    this.items = ["item1", "item2", "item3"];
    var lis = [];
    for (var liName in this.items) {
      var liName2 = this.items[liName];
      console.log("Adding " + this.items[liName]);

      //the clickHandler function here is the solution we created a function that get executed immediately each iteration and return a new function that has the correct value of `this.items[liName]` saved
      var clickHandler = (item => {
        return event => {
          this.onItemClickHandler(item);
        };
      })(this.items[liName]);

      lis.push(
        <li
          className="item-ListItem"
          key={this.items[liName]}
          onClick={clickHandler} // here we use the clickHandler function directly
        >
          <span>
            <a href="#">{this.items[liName]}</a>
          </span>
        </li>
      );
    }

    return (
      <div className="item">
        <label className="item-Header">
          <u>items</u>
        </label>
        <ul className="item-List">{lis}</ul>
      </div>
    );
  }
}

有关闭包的更多信息和示例，请查看此 link

---

编辑 我们可以在 ES6 中使用 let 而不是 @ArchNoob 提到的 for 循环中的 var 因为使用 let 将使 liName block 作用域