在for中传递onClick的动态参数不起作用

Passing dynamic argument on onClick inside for does not work

本文关键字：动态 参数 不起作用 onClick for      更新时间：2023-09-26

下面的react代码不起作用。'select'函数总是使用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循环中正确传递动态值?

由于您正在使用ES2015 箭头函数符号，我建议您将循环变量初始化的let替换为var。这样你就有了一个真正的块作用域，否则你就必须处理函数作用域，这就是问题的根源。

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

您必须为i变量定义一个新的作用域，因此它不会对所有变量使用相同的作用域。实现它的一种方法是使用一个immediate函数:

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>
  );
}
相关文章：