我正在嘗試獲取正在單擊的元素的 id，以便我可以使用該 id 引數通過 api 呼叫獲取所選的產品資料。
當我使用 onClick 處理程式通過 e.target.id 抓取它時，我什么也沒得到。
這不是通過 id 獲取單個專案的正確方法嗎？
這是我的沙箱 https://codesandbox.io/s/filter-test-forked-wli18?file=/src/App.js
uj5u.com熱心網友回復：
首先，在你的 Card 組件中，你有：
<div className="card" onClick={props.onClick}>
但是在 中App.js，您handleClick在呼叫Card組件時使用屬性。相反，它應該是：
<Card
onClick={handleClick}
/>
接下來，Event物件引數是原生 JS 事件，它不包含任何 React 道具。要id在事件處理程式中訪問單擊的卡片，您必須執行以下操作：
<div className="card" onClick={e => props.onClick(e, props.id)}>
這樣，您就可以訪問Eventobject 和 card item id。
uj5u.com熱心網友回復：
首先，您的handleClick函式沒有被執行。執行你需要改變功能onClick={props.onClick}，以onClick={props.handleClick}在行中沒有5的card.js檔案。然后將觸發handleClick函式。
uj5u.com熱心網友回復：
您的卡組件沒有設定 id。在您的卡片組件中，像這樣設定通過道具傳遞的 id
export default function Card(props) {
return (
<div className="card" onClick={props.onClick}>
<div className="img-container">
<img src={props.image} id={props.id} alt={props.id} />
</div>
<div className="info">
<p className="info-title">
<span>
<a href={props.url}>{props.title}...</a>
</span>
</p>
<p style={{ textAlign: "center" }}> {props.price} </p>
</div>
</div>
);
}
然后，在你的 App.js 中，像這樣使用你的卡片組件來呼叫 handleChange
<Card
id={item.id}
key={item.id}
title={item.title}
image={item.image}
price={item.price}
onClick={(e) => handleClick(e)}
/>
您將獲得在 console.log 中單擊的元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321697.html
標籤：javascript 反应 接口 反应钩子
下一篇：身份驗證令牌確實獲取API的問題