在无状态组件和地图函数内处理点击事件

Question

我正在使用 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)}
>

但是当我在卡片内移动光标时触发点击事件

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

Answer 1

需要在Card上，你传给handleClick的是什么取决于你在子组件中如何使用props，你可以传key或id。如果您不解构道具，语法也可以是 props.key 或 props.id。

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

在无状态组件和地图函数内处理点击事件

Handle Click Event in a Stateless component and inside a map function

javascript

reactjs

react-functional-component