我想在我的專案的活動元素之間切換顏色，但是這樣他們兩個都在改變點擊樣式，我該如何解決這個問題？謝謝！
function Language() {
const [style, setStyle] = useState(false);
const changeStyle = () => {
setStyle(!style);
};
return (
<>
<ul className="lang">
{languages.map(({ code, name, country_code }) => (
<li key={country_code}>
<h4 onClick={() => {i18next.changeLanguage(code); changeStyle()}} className={style ? "cont" : "cont2"}>{name}</h4>
</li>
))}
</ul>
</>
);
}
uj5u.com熱心網友回復：
您可以嘗試使用活動元素的索引作為狀態，而不是使用布林值作為狀態：
function Language() {
const [active, setActive] = useState(-1); // -1 represents no active element
const changeStyle = (index) => {
setStyle(index);
};
return (
<>
<ul className="lang">
{languages.map(({ code, name, country_code }, i) => ( // get index as i
<li key={country_code}>
<h4 onClick={() => {i18next.changeLanguage(code); changeStyle(i)}} className={active === i ? "cont" : "cont2"}>{name}</h4>
</li>
))}
</ul>
</>
);
}
然后您將能夠檢查 this 的索引li是否與活動索引相同。
uj5u.com熱心網友回復：
您可以將活動 li 的代碼設定為狀態值，并檢查狀態值是否等于 li 的代碼值或任何其他唯一值。
function Language() {
const [active, setActive] = useState('');
const changeStyle = (code) => setActive(code)
return (
<>
<ul className="lang">
{languages.map(({ code, name, country_code }) => (
<li key={country_code}>
<h4
onClick={()=>{
i18next.changeLanguage(code);
changeStyle(code)
}}
className={active===code && "active" }>
{name}
</h4>
</li>
))}
</ul>
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525142.html