Javascript 在React中将函数传递给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>
    );
}

handleClick（一）{
警报（一）；
}
render（）{
var项目=[]；
对于（变量i=0；i<7；i++）{
推(
this.handleClick（i）}/>
);
}
返回
{items}
；
}

子类：

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

render（）{
返回(
一些名称
);
}

但结果与我预期的不同

我希望第一个元素是

alert（0）

，第二个元素是

alert（1）

，依此类推

但是，当我单击所有元素时，它们都会显示

7

。我想这是因为我总是在for循环完成后使用

I

---

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

发生这种情况是因为闭包，因为您正在使用forLoop迭代器的

var

关键字，它的作用域将是render函数，传递给

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

render（）{
var项目=[]；
for（let i=0；i<7；i++）{//let关键字for迭代器
推(
this.handleClick（i）}/>
);
}
返回
{items}
；
}

即使使用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>;
}

render（）{
var项目=[]；
对于（变量i=0；i<7；i++）{
（功能（索引）{
推(
this.handleClick（i）}/>
);
}.绑定（本））（i）
}
返回
{items}
；
}

谢谢，它很管用！但是如果我想保留

var

并为每个子级添加新的本地范围，该怎么办？可能吗？我明白了，但这实际上不起作用，因为

this

的上下文是错误的。@squiid，对，您通过绑定来使用上下文