如何检测LoggBockRowItem组件点击事件并修改其值？

核心问题：点击事件绑定错误 #

你在LoggBockRowList组件中给LoggBockRowItem的onClick属性赋值时，直接执行了console.log(loggbock.key)——这会导致组件渲染时就立刻打印日志，而非点击时触发。React要求事件处理属性必须接收函数，而非函数执行的结果。

修复步骤 #

1. 修正LoggBockRowList中的点击事件绑定 #

把onClick={console.log(loggbock.key)}改为函数形式：

<LoggBockRowItem
  key={loggbock.key}
  id={loggbock.id}
  datum={loggbock.datum}
  tid={loggbock.tid}
  skift={loggbock.skift}
  anläggningsdel={loggbock.anläggningsdel}
  orsak={loggbock.orsak}
  driftstatus={loggbock.driftstatus}
  beskrivning={loggbock.beskrivning}
  plats={loggbock.plats}
  rapporterare={loggbock.rapporterare}
  
  onClick={() => console.log(loggbock.key)} 
/>

如果需要对点击项做交互修改，可以自定义处理函数：

// 在组件内先定义处理逻辑
handleRowClick = (loggbock) => {
  console.log('点击的行ID:', loggbock.key);
  // 这里添加修改值的逻辑，比如更新state中的loggbocks数组
}

// render中传递函数
onClick={() => this.handleRowClick(loggbock)}

2. 确认事件传递链（无需修改） #

你的CardRows和LoggBockRowItem的事件传递逻辑是正确的：

• CardRows把接收的onClick绑定到根div
• LoggBockRowItem将自身的props.onClick传递给CardRows
  只要父组件传递正确的函数，点击事件就能正常触发。

额外优化建议 #

• 避免在render中直接写匿名函数（小项目影响可忽略），可以用类属性箭头函数或bind方法优化性能
• 若要修改点击项的值，可在handleRowClick中通过setState更新loggbocks数组，或调用父组件传递的修改方法

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