我有一個未排序的串列，其中包含一些通過映射專案陣列生成的元素。這些專案是可點擊的，我已經有了使用點擊專案資訊的功能。但是，我想更改所選專案的樣式以使其可見您選擇的專案。
function SelectableList({items, onItemSelected}: Props) {
const [isSelected, setIsSelected] = useState(false);
const handleToggle = () => {
setIsSelected(!isSelected);
};
return (
<div>
<ul className={styles.ul}>
{items.map((item, i) =>
(
<li className={isSelected ? styles.selected : styles.li} key={item.id} onClick={() => {onItemSelected(item); handleToggle()}}>
<SelectableItem key={i} item={item} />
</li>
)
)}
</ul>
</div>
);
}
然而，我所做的方式改變了每個專案的樣式，而不僅僅是選定的專案。
有什么方法可以使它與我現在擁有的結構一起作業？或者您是否有更好的解決方案？
uj5u.com熱心網友回復：
您必須使用 li 標簽中的唯一鍵檢查條件。
function SelectableList({items, onItemSelected}: Props) {
const [isSelected, setIsSelected] = useState(false);
const handleToggle = (i) => {
setIsSelected(i);
};
return (
<div>
<ul className={styles.ul}>
{items.map((item, i) =>
(
// checks the selectedItem with index
<li className={isSelected === i ? styles.selected : styles.li} key={item.id} onClick={() => {onItemSelected(item); handleToggle(i)}}>
<SelectableItem key={i} item={item} />
</li>
)
)}
</ul>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503797.html
下一篇：模態出現后的焦點輸入React