在React中将函数传递给子级

Question

I'd like to pass functions to the child using props, and create several components that can be clicked on

parent class:

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

child class:

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

But the result is different from what I expected.

I wanted the first element to alert(0) , the second element to alert(1) , and so on.

But instead, all elements shows 7 when I click on them. I guess that's because I'm always using the i after for-loop has finished.

I guess this is a problem about basic concepts of scopes or using closure or something, rather than a React problem. But still I can't find a right way to fix this problem.

Answer 1

It happens because of closure, since your are using var keyword for forLoop iterator, its scope will be the render function and the value passed to handleClick will always be the updated value of iterator. Use let keyword to solve closure issue

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

Even with var, you can solve the closure issue using anonymous function

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