Javascript 从被单击的元素集的.map函数中获取键{index}prop

我有以下代码

const Component = () => {

  const [Clicked, setClicked] = useState(false);

  const handleClick = (prop, e) => {
    console.log(prop);
  }

  return (
    <div>
       {arrayCard.map((item, i) => {
          return (<Card 
            onClick={(e) => handleClick(e.target.getAttribute('akey'), e)}
            src={item} 
            akey={i}  />) 
       })}
    </div>
  );

const组件=（）=>{
const[Clicked，setClicked]=useState（false）；
常量handleClick=（道具，e）=>{
控制台日志（道具）；
}
返回(
{arrayCard.map（（项目，i）=>{
返回（handleClick（e.target.getAttribute（'akey'），e）}
src={item}
akey={i}/>）
})}
);

这是我的卡片组件

import React from 'react';
import Image from 'next/image'

const Card = (props) => {

   return (
    <div>
       <button  onClick={props.onClick} >
         <Image
               src={props.src}
               alt="Card Pic"
               width={80}
               height={80}
         />
       </button>
    </div>     
   );
}

从“React”导入React；
从“下一个/图像”导入图像
康斯特卡=（道具）=>{
返回(
);
}

如您所见，我有一个.map函数，它从数组中获取值并生成卡片元素。我想做的是得到被点击的特定元素，所以我想如果我传递一个键值，我可以得到被点击的确切元素

问题是，当我想获取key prop的值时，e.target.getAttrinute（'akey'）返回null。如果我用src做的话，它会工作的

---

我希望你能帮我做这件事。谢谢

您只需传递项目的

索引即可（通常就是这样做的）：

const组件=（道具）=>{
常量handleClick=（索引，e）=>{
控制台日志（索引）；
};
返回(
{props.arrayCard.map（（项目，索引）=>{
返回(
handleClick（index，e）}src={item}/>
);
})}
);
};
您将一些道具
akey
传递给
Card
组件，但它与
按钮
onClick事件有何关系？该组件返回
Card
组件的多个呈现，这就是执行此
handleClick的关系（例如，target.getAttribute（i）
我仍然在onClick（）上获得空值谢谢！我还不能将其标记为正确，因为我必须等待5分钟，但你能告诉我为什么这样做吗？卡元素如何在不传递道具的情况下保存索引值？谢谢每个
onClick
函数传递给每个
卡
组件的
索引
值上都有一个闭包（）。
const Component = (props) => {
  const handleClick = (index, e) => {
    console.log(index);
  };

  return (
    <div>
      {props.arrayCard.map((item, index) => {
        return (
          <Card key={index} onClick={(e) => handleClick(index, e)} src={item} />
        );
      })}
    </div>
  );
};