Question

以下反应代码不起作用。＆＃39;选择＆＃39;函数总是用10而不是赋值来调用。

    select( x ) {
      alert( x ); // Always alerts 10.
    }

    render() {
      var AllData = [];
      for( var i = 0; i<10 ;i++ ) {
        AllData.push( 
          <div key={i} onClick={() => this.select(i)} >{i}</div>
        );
      }   
      return (
        <div>
          {AllData}
        </div>
      );
    }

如何正确传递for循环中的动态值？

Answer 1

由于您使用的是ES2015 箭头功能表示法，我建议您只需将var替换为let进行循环变量初始化。这样你就拥有了一个真正的块范围，否则你必须处理功能范围，这是你麻烦的根源。

for( let i = 0; i<10 ;i++ ) {
   AllData.push( 
       <div key={i} onClick={() => this.select(i)} >{i}</div>
   );
}

Answer 2

您必须为i变量定义新范围，因此它不会对它们使用相同的范围。实现它的一种方法是使用立即函数：

select( x ) {
  alert( x );
}

render() {
  var AllData = [];
  for( var i = 0; i<10 ;i++ ) {
    ((i) => {
        AllData.push( 
          <div key={i} onClick={() => this.select(i)} >{i}</div>
        );      
    })(i);
  }   
  return (
    <div>
      {AllData}
    </div>
  );
}

在onClick里面传递动态参数不起作用

2 个答案: