问题描述
我有一个反应组件,当单击组中的任何卡片时,我需要添加一个动作。问题是我需要能够确定点击了哪张卡片才能正确执行我的操作。我曾尝试向每张卡片添加 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)} />)}