在這里，我嘗試在單擊按鈕時切換反應圖示，但它仍然無法正常作業：
這是我的代碼：
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
<button onClick={handleClick} className="top-rated-car-react-button">
{anchorEl ? (
<MdFavoriteBorder
style={{
color: "#F76631",
}}
/>
) : (
<MdFavorite
style={{
color: "#F76631",
}}
/>
)}
</button>
我嘗試使用回應圖示按鈕 onClick 事件，但如果單擊按鈕時MdFavoriteBorder應該更改與活動更改MdFavorite時相同，則它不會同時切換兩個圖示MdFavoriteMdFavoriteBorder
uj5u.com熱心網友回復：
看起來太復雜了。我將創建一個布爾狀態，然后像這樣切換：
import { useState } from "react";
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
export default function App() {
const [favorite, setFavorite] = useState(false);
const toggleFavorite = () => setFavorite((prev) => !prev);
return (
<button onClick={toggleFavorite} className="top-rated-car-react-button">
{favorite ? (
<MdFavoriteBorder style={{ color: "#F76631" }} />
) : (
<MdFavorite style={{ color: "#F76631" }} />
)}
</button>
);
}
https://codesandbox.io/s/cool-poincare-wm1ite
uj5u.com熱心網友回復：
你可以用一種簡單的方式來做到這一點，比如
const [changeIcon, setChangeIcon] = useState(true);
const handleClick = (event) => {
setAnchorEl(!changeIcon);
};
<button onClick={handleClick} className="top-rated-car-react-button">
{changeIcon ? (
<MdFavoriteBorder
style={{
color: "#F76631",
}}
/>
) : (
<MdFavorite
style={{
color: "#F76631",
}}
/>
)}
</button>單擊 setChangeIcon 將根據先前的狀態將 changeIcon 的值設定為 false 或 true，并且組件將重新加載并且圖示將被切換
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476627.html
標籤：javascript 反应 切换 反应图标
上一篇：指定使用附加欄位實作介面的Typescript回傳型別
下一篇：如何制作自動完成輸入欄位下拉選單