向包裹在`div`中的一组`cards`添加onclick函数

如何解决向包裹在`div`中的一组`cards`添加onclick函数

我有一个反应组件，当单击组中的任何卡片时，我需要添加一个动作。问题是我需要能够确定点击了哪张卡片才能正确执行我的操作。我曾尝试向每张卡片添加 key 和 index，但我无法弄清楚如何捕获点击了哪张卡片这是我的代码：

<>
      <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>
    </>

您将在 card-group div 中看到我添加了带有 console.log 的 onClick 函数。我为每张卡片添加了一个索引，其中包含每张卡片中信息组的名称，希望以此名称为目标。但这不起作用。无论如何，我是否可以到达该物业或进行此操作的更好方法？

解决方法

不要将卡片渲染为独立组件，而是尝试将它们的数据存储在数组中并使用 map 函数渲染卡片。然后，您可以为每张卡片赋予一个以索引为参数的 onClick 事件，这样您就知道正在点击哪张卡片。像这样：

创建一组卡片

const cards = [
    {
        name: "card 1",// some other data
    },{
        name: "card 2",{
        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)} />)}