每個(gè)按鈕都需要單獨(dú)的狀態(tài)。我建議使用地圖來存儲(chǔ)一個(gè)按鈕 ID 和一個(gè)布爾值，以確定它是否為“黑色”，即點(diǎn)擊處理程序只是切換一個(gè)布爾值。我不知道這是否是將代碼復(fù)制/粘貼到 SO 時(shí)的拼寫錯(cuò)誤，但需要在功能組件主體中聲明反應(yīng)狀態(tài)。
const [isBlack, setIsBlack] = useState({});
您還可以通過將其轉(zhuǎn)換為柯里化回調(diào)來使用單擊處理程序，將按鈕 ID 獲取并包含在范圍內(nèi)。這使用功能狀態(tài)更新來淺層復(fù)制現(xiàn)有狀態(tài)并更新包含的按鈕 ID 的值。
const handleBtn = btnId => e => {
e.preventDefault();
setIsBlack(state => ({
...state,
[btnId]: !state[btnId],
}));
};
完整代碼
function Mata() {
const [activeTab, setActiveTab] = useState("activeTab");
const [isBlack, setIsBlack] = useState({});
const handleBtn = btnId => e => {
e.preventDefault();
setIsBlack(state => ({
...state,
[btnId]: !state[btnId]
}));
};
return (
<div className="container">
<button
style={{ backgroundColor: isBlack["btn1"] ? "#262626" : "#F3F3F3" }}
className={`btn1 ${isBlack["btn1"] && activeTab}`}
onClick={handleBtn("btn1")}
>
btn1
</button>
<button
style={{ backgroundColor: isBlack["btn2"] ? "#262626" : "#F3F3F3" }}
className={`btn2 ${isBlack["btn2"] && activeTab}`}
onClick={handleBtn("btn2")}
>
btn2
</button>
<button
style={{ backgroundColor: isBlack["btn3"] ? "#262626" : "#F3F3F3" }}
className={`btn3 ${isBlack["btn3"] && activeTab}`}
onClick={handleBtn("btn3")}
>
btn3
</button>
<button
style={{ backgroundColor: isBlack["btn4"] ? "#262626" : "#F3F3F3" }}
className={`btn4 ${isBlack["btn4"] && activeTab}`}
onClick={handleBtn("btn4")}
>
btn4
</button>
<button
style={{ backgroundColor: isBlack["btn5"] ? "#262626" : "#F3F3F3" }}
className={`btn5 ${isBlack["btn5"] && activeTab}`}
onClick={handleBtn("btn5")}
>
btn5
</button>
</div>
);
}
有很多重復(fù)的代碼，所以一個(gè)更干的版本，其中活動(dòng)選項(xiàng)卡和按鈕作為道具傳遞。
function Mata({ activeTab = '', buttons }) {
const [isBlack, setIsBlack] = useState({});
const handleBtn = btnId => e => {
e.preventDefault();
setIsBlack(state => ({
...state,
[btnId]: !state[btnId]
}));
};
return (
<div className="container">
{buttons.map(btn => (
<button
style={{ backgroundColor: isBlack[btn] ? "#262626" : "#F3F3F3" }}
className={`btn1 ${isBlack[btn] && activeTab}`}
onClick={handleBtn(btn)}
>
{btn}
</button>
))}
</div>
);
}
像這樣使用
const buttons = ["btn1", "btn2", "btn3", "btn4", "btn5"];
...
<Mata buttons={buttons} />
編輯
似乎你真的在創(chuàng)建一個(gè)“標(biāo)簽管理器”。我建議將狀態(tài)放樣到父級并轉(zhuǎn)換Mata為只呈現(xiàn)“選項(xiàng)卡”按鈕的“啞”組件。采用 3 個(gè)道具：活動(dòng)選項(xiàng)卡索引、按鈕數(shù)組和狀態(tài)更新回調(diào)。
function Mata({ activeTab = -1, buttons, setActiveTab }) {
return (
<div className="container">
{buttons.map((btn, i) => {
const isActive = i === activeTab;
return (
<button
key={btn.id}
style={{ backgroundColor: isActive ? "#262626" : "#F3F3F3" }}
className={`${btn.id} ${isActive && activeTab}`}
onClick={() => setActiveTab(i)}
>
{btn.id}
</button>
);
})}
</div>
);
}
示例選項(xiàng)卡數(shù)據(jù)
const tabs = [
{ id: "btn1", data: "data1" },
{ id: "btn2", data: "data2" },
{ id: "btn3", data: "data3" },
{ id: "btn4", data: "data4" },
{ id: "btn5", data: "data5" }
];
用法示例
<Mata activeTab={activeTab} buttons={tabs} setActiveTab={setActiveTab} />
{activeTab === -1 ? (
<div>Social Media</div>
) : (
<div>{tabs[activeTab].data}</div>
)}
添加“圖標(biāo)”
類似于在運(yùn)行時(shí)選擇類型
如果 SVG 圖標(biāo)還不是反應(yīng)組件，將它們包裝成一個(gè)簡單的功能組件
const Icon1 = () => <svg>...</svg>;
在標(biāo)簽數(shù)據(jù)中添加一個(gè)圖標(biāo)字段并將值設(shè)置為圖標(biāo)組件
const tabs = [
{ id: "btn1", data: "data1", icon: Icon1 },
{ id: "btn2", data: "data2", icon: Icon2 },
{ id: "btn3", data: "data3", icon: Icon3 },
{ id: "btn4", data: "data4", icon: Icon4 },
{ id: "btn5", data: "data5", icon: Icon5 }
];
并解構(gòu)并重命名以呈現(xiàn)
function Mata({ activeTab = -1, buttons, setActiveTab }) {
return (
<div className="container">
{buttons.map((btn, i) => {
const isActive = i === activeTab;
const { icon: Icon, id } = btn; // <-- rename icon -> Icon
return (
<button
key={id}
style={{ backgroundColor: isActive ? "#262626" : "#F3F3F3" }}
className={`${id} ${isActive && activeTab}`}
onClick={() => setActiveTab(i)}
>
<Icon /> {id} // <-- render icon component
</button>
);
})}
</div>
);
}
