Javascript 向包装在'div'中的一组'cards'添加onclick函数`

我有一个react组件，当组中的任何卡被单击时，我需要添加一个操作。问题是我需要能够识别哪张卡被点击，以正确地安排我的行动。我试着在每张卡片上添加一个

键

和

索引

，但我不知道如何捕获被点击的卡片这是我的代码：

<>
      <div className={styles.cardContainer}>
        <div
          className={`card-group ${styles.cardGroups}`}
  >>>>>   onClick={(e) => console.log(e.target)}
        >
          <Card index={type} className={styles.observationsType}>
            <div className="">
              <h2 className={styles.title}>{title}</h2>
              <div className={styles.limits}>
                {!!lim && !!lim.label.upper ? `Upper Limit: ${lim.label.upper}` : ""}
              </div>
              <div className={styles.limits}>
                {!!lim && !!lim.label.lower ? `Lower Limit: ${lim.label.lower}` : ""}
              </div>
            </div>
          </Card>
          <Card index={type} className={styles.observationsDateCard}>
            <div className={styles.date}>
              <div>{!!obs.recordedDate && moment(obs.recordedDate).format("L")}</div>
              <div>{!!obs.recordedDate && moment(obs.recordedDate).format("LT")}</div>
            </div>
          </Card>
          <Card index={type} className={`text-center ${styles.observationLatest}`}>
            <div className={styles.latest}>
              {value}
              <div>{obs.unit}</div>
            </div>
          </Card>
        </div>
      </div>
    </>

>>>>onClick={（e）=>console.log（e.target）}
>
{title}
{！！lim&&！！lim.label.upper？`上限：${lim.label.upper}`:“”
{！！lim&&！！lim.label.lower？`下限：${lim.label.lower}`:“”
{！！obs.recordedDate&&moment（obs.recordedDate）.format（“L”）}
{！！obs.recordedDate&&moment（obs.recordedDate）.format（“LT”）}
{value}
{obs.unit}

---

您将在

卡组

div中看到，我添加了带有console.log的

onClick

函数。我在每张卡片上加了一个索引，每个卡片上都有一组信息的名称，希望以此为目标。但这不起作用。是否有其他方法可以访问该属性或更好的方法执行此操作？

不要将卡作为独立组件渲染，而是尝试将其数据存储在阵列中，并使用贴图功能渲染卡。然后，您可以给每个卡片一个onClick事件，并将索引作为参数，这样您就可以知道正在单击哪个卡片。大概是这样的：

创建一组卡片

const cards = [
    {
        name: "card 1",
        // some other data
    },
    {
        name: "card 2",
        // some other data
    },
    {
        name: "card 3",
        // some other data
    }
]

创建一个函数来捕获单击的卡：

function onCardClick(index) {
    const selectedCard = cards[index];

    // do some stuff with the clicked card
}

从阵列中渲染卡：

{cards.map((card, index) => <Card onClick={() => onCardClick(index)} />)}

{cards.map（（卡片，索引）=>onCardClick（索引）}/>）}

谢谢，这非常有帮助。我已经在映射我制作的卡片阵列，我没有意识到我可以只使用索引。非常感谢。没问题，先生，很乐意帮忙！