我正在嘗試創建類似自定義選擇的東西。一次只能選擇一項。通過添加相應的 css 類“活動”來突出顯示單擊的元素。問題是我知道從其他已選擇的元素中洗掉類的唯一方法是通過“querySelector” - 選擇具有相同類的所有專案并從它們中洗掉“活動”類。這將是一個 DOM 操作，這不是在 ReactJS 中作業的正確方式，對吧？
解決此問題的正確方法是什么？
到目前為止我的代碼：
const size = ['s', 'm', 'l']
const handleSelectSize = (value) => {
setChosenSize(value);
}
<div className='size-variants'>{size.map(value => {
return (
<div className='size-item' onClick={() => handleSelectSize(value)} value={value} key={value}>{value.toUpperCase()}</div>
)
})}
</div>```
uj5u.com熱心網友回復：
我從您的代碼中了解到您有一個chosenSize包含最后選擇的狀態size，因此只需檢查每個渲染是否value與最后選擇的值匹配并將active類添加到它
const size = ['s', 'm', 'l']
const handleSelectSize = (value) => {
setChosenSize(value);
}
<div className='size-variants'>{size.map(value => {
return (
<div className=`size-item ${chosenSize == value && 'active'}` onClick={() => handleSelectSize(value)} value={value} key={value}>{value.toUpperCase()}</div>
)
})}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522745.html