下面是代碼。每當我點擊添加到購物車時，對于每個專案。我可以看到警報。如果我 console.log 一些靜態的東西，而不是 item，它也可以作業，但與 item 一起作業。我在控制臺中收到合成基礎事件
function Product() {
useEffect (() => {
fetchItems();
},[]);
const [items, setItems] = useState([]);
const fetchItems = async() => {
const data = await fetch('/product',{
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
credentials: "include"
});
const items = await data.json();
setItems(items);
};
const clickMe = (item) => {
alert("Working");
console.log(item);
};
return (
<div>
<h1>Product Page</h1>
{
items.map(item => (
<p>{item.productname} {item.productprice} {item.type} <a onClick={clickMe.bind(item)}>add to cart</a> </p>
))
}
</div>
)
}
export default Product
uj5u.com熱心網友回復：
這里.bind不會做你認為它會做的事情。
函式.prototype.bind
該bind()方法創建一個新函式，該函式在呼叫時將其this關鍵字設定為提供的值，并在呼叫新函式時在任何提供的引數之前提供給定的引數序列。
有了onClick={clickMe.bind(item)}你只系結item到this功能和onClick事件仍然被作為第一個引數回呼過去了。
如果您想傳遞當前映射的內容，item則需要將其作為附加引數傳遞。
onClick={clickMe.bind(null, item)}
您也可以只使用匿名回呼函式。
onClick={() => clickMe(item)}
或者宣告clickMe為一個柯里化函式并回傳item回呼范圍內關閉的點擊處理程式。
const clickMe = (item) => () => {
alert("Working");
console.log(item);
};
...
onClick={clickMe(item)}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/364573.html
標籤：javascript 反应 反应钩子 反应功能组件
上一篇：如何在不渲染React中的某些組件的情況下走特定路線？
下一篇：反應。如何更新點擊元素的狀態