ReactJS中OnClick函数传值问题：记忆游戏图片ID传递报错

问题原因 #

你遇到的"id is not defined"错误，是因为在onClick={() => imageClick(id)}里的id不是当前作用域的变量——你只是给img标签设置了id属性，但这个属性不会自动成为可直接调用的变量，所以React找不到它。

三种可行解决方案 #

方案1：直接传递计算id的表达式 #

既然循环中的i是可用的，直接把生成id的表达式i * 4 - 1作为参数传给imageClick：

<img 
  src={OYOOO} 
  alt={`Image ${i + 2}`} 
  id={i * 4 - 1} 
  onClick={() => imageClick(i * 4 - 1)}
/>

方案2：提前定义id变量 #

在循环内部先把id赋值给变量，再传递，代码可读性更好：

{/* 示例：用Array.from生成16张图片的循环逻辑 */}
{Array.from({length: 16}, (_, i) => {
  const imgId = i * 4 - 1;
  return (
    <img 
      key={imgId} // 循环列表必须添加唯一key，避免React警告
      src={OYOOO} 
      alt={`Image ${i + 2}`} 
      id={imgId} 
      onClick={() => imageClick(imgId)}
    />
  );
})}

方案3：通过事件对象获取id #

修改imageClick函数，从点击事件的目标元素中读取id（注意id是字符串类型，需要转成数字）：

// 调整imageClick函数
function imageClick(e) {
  const value = Number(e.target.id);
  alert("Test");
  alert(value);
}

// img标签的onClick直接绑定函数，无需箭头函数
<img 
  src={OYOOO} 
  alt={`Image ${i + 2}`} 
  id={i * 4 - 1} 
  onClick={imageClick}
/>

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