如何为React中map遍历渲染的卡片添加有效onClick事件并识别点击项

React的事件绑定规则区分原生DOM标签和自定义组件：

• 对于小写开头的原生DOM标签（比如div、button），直接写onClick属性会被React识别为事件监听，自动绑定到对应DOM节点上
• 对于大写开头的自定义组件（比如你写的Cards），标签上写的所有属性都只是普通的props参数，React不会自动做事件绑定。你现在给Cards传了onClick={click}，但Cards组件内部根本没有接收、使用这个onClick参数，自然点击不会触发任何逻辑。

另外你当前的代码还有两个容易出问题的细节：

1. map遍历的形参也命名为data，和外层的数据源data重名，容易引发变量覆盖的逻辑bug
2. 事件处理函数里直接写了e.preventDefault()，普通卡片容器没有默认交互行为，这句没有实际意义，还可能在后续绑定到表单、链接元素时引发非预期的拦截。

分两步实现，既能触发点击事件，又能精准识别被点击的卡片：

1. 让Cards组件支持接收点击事件
   第一种是更优雅的写法：修改Cards组件，接收外部传入的onClick参数，绑定到组件内部最外层的可点击DOM节点上，示例如下：

   // 注意这里要解构拿到外部传进来的onClick
   const Cards = ({ data, onClick }) => {
     return (
       // 把onClick绑定到实际渲染的卡片根DOM上
       <div className="card-item" onClick={onClick}>
         <h3>{data.title}</h3>
         <p>{data.desc}</p>
         {/* 其他卡片内容 */}
       </div>
     )
   }
   

   如果你暂时不想修改Cards组件内部代码，也可以在渲染时给Cards外层套一层原生DOM标签，把事件绑在外层标签上，缺点是会额外多一层DOM嵌套：

   {data?.map(item => (
     <div key={item._id} onClick={(e) => handleCardClick(e, item)}>
       <Cards data={item} />
     </div>
   ))}
   

2. 传入当前卡片标识，精准识别点击对象
   不要直接把通用的click函数传给onClick，可以在渲染时通过箭头函数把当前卡片的ID、完整数据传入处理函数，同时把map的形参改成item避免重名，用可选链简化判空逻辑：

   {data?.map((item) => (
     <Cards
       key={item._id}
       data={item}
       onClick={(e) => handleCardClick(e, item._id, item)}
     />
   ))}
   

   对应的事件处理函数：

   const handleCardClick = (e, cardId, cardData) => {
     console.log("点击触发，当前卡片ID：", cardId);
     console.log("当前卡片完整数据：", cardData);
     // 在这里写点击后的业务逻辑，比如跳转详情页、弹出操作菜单等
   }
   

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