处理无状态组件中和映射函数内部的Click事件

问题描述

我正在使用ReactJs，我有两个无状态组件：

父组件收到项目列表

{currentProjectData.map((project) => (
    <ProjectItem
      key={project.projectid}
      id={project.projectid}
      project={project}
    />
  ))}

和子组件接收密钥

 return (
    <Card key={id} elevation={5} className={classes.root}>
      <Box
        borderLeft={componentItem.borderLeftValue}
        borderColor={componentItem.borderColorValue}
        onMouseOver={handleChangeOnMouseEnter}
        onMouseLeave={handleChangeOnMouseLeave}
      ></Card>)

有人在我需要钥匙的卡上单击时，我在尝试处理单击事件时遇到了麻烦

 const handleClick = (key) => {
   console.log(key);
  };

我在卡中放置了点击事件

<Card
  key={id}
  elevation={5}
  className={classes.root}
  onClick={handleClick(id)}
>

但是当我将光标移动到卡中时，点击事件会触发

我应该在哪里处理click事件（父组件或子组件）以及如何处理？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）