javascript - 在 React 中将函数传递给 child

Question

我想使用 Prop 将功能传递给 child ，并创建几个可以点击的组件

父类:

handleClick(i){
    alert(i);
}

render(){
    var items = [];
    for (var i = 0; i < 7; i++) {
      items.push(
        <Item onClick={()=>this.handleClick(i)} />
      );
    }
    return <ul>{items}</ul>;
}

子类:

render() {
    return (
      <li onClick={this.props.onClick}> some names </li>
    );
}

但是结果和我预想的不一样。

我希望第一个元素为alert(0)，第二个元素为alert(1)，依此类推。

但是，当我点击它们时，所有元素都显示 7。我想那是因为我总是在 for 循环完成后使用 i。

我想这是一个关于范围的基本概念或使用闭包之类的问题，而不是 React 问题。但是我仍然找不到解决这个问题的正确方法。

Answer 1

它的发生是因为闭包，因为你正在为 forLoop 迭代器使用 var 关键字，它的范围将是渲染函数，传递给 handleClick 的值将始终是迭代器的更新值。使用let关键字解决闭包问题

render(){
    var items = [];
    for (let i = 0; i < 7; i++) {  // let keyword for iterator
      items.push(
        <Item onClick={()=>this.handleClick(i)} />
      );
    }
    return <ul>{items}</ul>;
}

即使是var，也可以用匿名函数解决闭包问题

render(){
    var items = [];
    for (var i = 0; i < 7; i++) {
      (function(index){
          items.push(
              <Item onClick={()=>this.handleClick(i)} />
          );
      }.bind(this))(i)
    }
    return <ul>{items}</ul>;
}