React中触发卡片事件时，如何识别卡片并传递其参数给父组件？

这问题在React组件通信里太常见啦，咱们直接搞定它～核心思路就是在触发点击事件的时候，把当前被点击卡片的完整数据对象传递给父组件的回调函数。

步骤1：修改Experience组件的map渲染逻辑 #

在遍历crdObj生成MyCard的时候，给onClick属性绑定一个箭头函数，把当前遍历到的item作为参数传给父组件的handleClick：

class Experience extends Component{
 render() {
 return (
 <div className={`container mt-2 w-100 ${styles.container}`} >
 { this.props.crdObj.map(item=> {
 return <MyCard 
           className={styles.mycard} 
           src={item.img} 
           title={item.title} 
           text={item.des} 
           date={item.period} 
           location={item.loc} 
           onClick={() => this.props.onClick(item)} // 关键：绑定当前卡片的item数据
         />
 }) }
 </div>
 )
 }
}

步骤2：在父组件的handleClick中接收卡片数据 #

现在你的handleClick回调函数就可以拿到被点击卡片的完整数据了，直接用参数接收就行：

handleClick = (clickedCard) => {
  // 这里就能获取到被点击卡片的所有信息啦
  console.log("被点击的卡片详情：", clickedCard);
  // 比如可以根据clickedCard.title或者其他字段做对应处理
}

可选优化：用bind传递参数 #

如果你更习惯用bind的方式，也可以这么写（效果和箭头函数一致）：

onClick={this.props.onClick.bind(this, item)}

为什么原来的写法不行？ #

之前你只是把父组件的handleClick函数直接传给了MyCard，没有携带任何当前卡片的上下文信息，所以父组件只能知道“有个卡片被点击了”，但不知道“是哪一张”。现在通过在map遍历的时候把当前item绑定到点击事件里，就给回调函数带上了明确的卡片标识。

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