React向子组件传递状态更新函数后点击触发失效问题求助

核心问题原因 #

• 事件绑定错误：在AdminCatalog中给AdminItem的onClick属性直接赋值为selectVacation(vacation)，会在组件渲染阶段就立即执行状态更新函数，而非点击时触发，同时你实际传给onClick的是函数执行后的返回值（默认是undefined），导致点击没有任何响应。
• 子组件事件透传缺失：AdminItem作为自定义组件，默认不会自动绑定onClick事件到内部DOM，需要在AdminItem内部手动将收到的onClick属性绑定到可点击的元素上，否则即使父组件传了正确的函数也无法触发。

修复步骤 #

1. 修正AdminCatalog中的事件绑定 #

将onClick的赋值改为箭头函数包裹，确保仅在点击时执行状态更新逻辑：

<ItemsWrap>
  {vacations?.map((vacation) => (
    <AdminItem
      onClick={() => selectVacation(vacation)}
      key={vacation._id}
      vacation={vacation}
    />
  ))}
</ItemsWrap>

2. AdminItem组件透传点击事件 #

需要在AdminItem内部把收到的onClick属性绑定到可点击的节点上，如果你希望点击AdminSelect时触发事件，示例如下：

// AdminItem组件内部代码示例
const AdminItem = ({ onClick, vacation }) => {
  // 组件内部其他逻辑
  return (
    {/* 把onClick绑定到外层容器或者AdminSelect组件上 */}
    <div onClick={onClick}>
      <AdminSelect
        photo={updatedPhoto}
        title={user.name}
        startDate={moment(vacation.startDate).format('DD/MM/YYYY')}
        endDate={moment(vacation.endDate).format('DD/MM/YYYY')}
        date={date}
      />
    </div>
  )
}

如果AdminSelect本身也是自定义组件，还需要继续在AdminSelect内部把onClick绑定到它内部的原生DOM元素（如div、button等）上，才能最终触发点击事件。

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