我想在單擊按鈕時更改按鈕上的圖示，該按鈕具有 onClick 事件以將產品添加到購物籃。
<Button
style={{ backgroundColor: "transparent" }}
type="primary"
icon={<img src={plusCart} />}
onClick={addToBasket}
/>
uj5u.com熱心網友回復：
const [buttonClicked, setButtonClicked] = useState(false);
const addToBasket = () => {
...
setButtonClicked(true);
};
...
<Button
...
icon={<img src={buttonClicked ? someIcon : plusCart} />}
onClick={addToBasket}
/>
uj5u.com熱心網友回復：
您可以為此使用布爾狀態，可能像這樣：
const [buttonClicked, setButtonClicked] = useState(false);
const addToBasket = () => {
setButtonClicked(true);
// your code..
};
<Button
style={{ backgroundColor: "transparent" }}
type="primary"
icon={buttonClicked ? <img src={otherIcon}/> : <img src={plusCart}/>}
onClick={addToBasket}
/>
uj5u.com熱心網友回復：
如果在鉤子中單擊按鈕useState并且 onClick 更改此狀態，您可以存盤資訊：
const [clicked, setClicked] = React.useState(false)
return(
<Button
style={{ backgroundColor: "transparent" }}
type="primary"
icon={<img src={clicked ? plusCart : minusCart} />}
onClick={(e)=>{
setClicked(true);
addToBasket(e);}}
/>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415562.html
標籤：