React内联onClick事件传递错误值问题求助

你遇到的是典型的闭包陷阱：循环中创建的事件处理函数共享了同一个循环变量的引用，当循环结束时变量已经变成最后一次迭代的值，所以点击任何日期都会触发最后那个值的回调。

错误代码示例（对应你的问题场景） #

// 错误写法：所有onClick共享同一个i的引用
const dates = []
for (var i = 1; i <= 12; i++) {
  dates.push(
    <div key={i} onClick={() => selectedDate(i)}>{i}</div>
  )
}

合规解决方案 #

方案1：用map渲染（推荐，更符合React范式）

利用数组map的迭代特性，每个迭代项都会创建独立的作用域，确保每个onClick捕获到当前的日期值：

const dateElements = Array.from({ length: 12 }, (_, idx) => idx + 1).map(day => {
  return (
    <div 
      key={day} 
      onClick={() => selectedDate(day)}
    >
      {day}
    </div>
  )
})

方案2：for循环中创建独立作用域

如果必须用for循环，用立即执行函数（IIFE）为每次迭代创建独立作用域，把当前日期值传入：

const dates = []
for (let i = 1; i <= 12; i++) {
  (function(currentDay) {
    dates.push(
      <div key={currentDay} onClick={() => selectedDate(currentDay)}>{currentDay}</div>
    )
  })(i)
}

方案3：ES6 for循环用let（注意变量声明）

ES6的let在for循环中每次迭代都会创建新的变量绑定，替代var就能解决问题：

const dates = []
for (let i = 1; i <= 12; i++) { // 这里用let，每次迭代的i都是独立的
  dates.push(
    <div key={i} onClick={() => selectedDate(i)}>{i}</div>
  )
}

核心原理 #

本质是让每个onClick事件处理函数都能捕获到独立的日期变量引用，而不是共享循环结束后的最终变量值。

内容的提问来源于stack exchange，提问作者peruvian_sailboat