我正在构建一个购物车应用程序,该应用程序将每个项目都作为卡片组件包含在内。我通过映射一些虚拟对象数据来渲染这些卡片,如下所示:
const Home = () => {
const dummyData = [
{
id: 1,
title: 'tshirt',
price: 10
},
{
id: 2,
title: 'coat',
price: 20
}
]
const RenderCards = () => {
return (
dummyData.map(
(d) => {
return (
<Card key={d.id} title={d.title} price={d.price} handleAddToCart={handleAddToCart}/>
)
}
)
)
}
const handleAddToCart = () => {
// maybe access id and price here?
}
return (
<>
<RenderCards />
</>
)
}
和Card正在渲染的组件:
const Card = ({id, title, price}) => {
return (
<>
<div key={id}>
<p>{title}</>
<p>{price}</>
<button onClick={handleAddToCart}>Add to cart</button>
</div>
</>
)
}
现在单击每张卡片中的按钮,我想将数据(卡片的 ID 和商品的价格)发送回父组件Home。假设点击了第二张卡片,我想访问id并price进入Home.
编辑: 也许我没有说清楚,我想在handleAddToCart功能中访问点击卡的价格和 ID。
至尊宝的传说
慕田峪7331174
相关分类