我有一個專案串列，這些專案顯示在 React 類組件的 UI 上。用戶點擊的任何專案都應該變成綠色，而其余的則是灰色的。我還希望每個專案的懸停顏色為綠色。
我目前所擁有的不起作用。如果我單擊一個串列項，所有串列項都會變為綠色。然后，如果我單擊另一個串列項，則全部恢復為灰色。
JS：
class AFile extends Component {
constructor(props) {
super(props);
this.state = {
selected: false
}
}
handleClick= (index) => {
// do stuff with index
this.setState(selected: !this.state.selected);
}
const list = [
{order: 1, name: 'a'},
{order: 2, name: 'b'},
{order: 3, name: 'c'}
]
render() {
return (
list.map( (item, index) => {
return (
<div key={index}>
<Link to='#' onClick={()=>this.handleClick(index)} className={ this.state.selected ? 'list-item-selected' : 'list-item } >
{item.order}. {item.name}
</Link>
</div>
)
}
)
}
}
CSS：
.list-item {
color: gray;
}
.list-item:hover {
color: green;
}
.list-item-selected {
color: green;
}
uj5u.com熱心網友回復：
您應該將所選專案存盤在狀態中。試試這個：
class AFile extends Component {
constructor(props) {
super(props);
this.state = {
selectedItem: null,
};
}
handleClick = (selectedItem) => {
this.setState({ selectedItem });
};
render() {
const list = [
{ order: 1, name: 'a' },
{ order: 2, name: 'b' },
{ order: 3, name: 'c' },
];
return list.map((item, index) => {
return (
<div key={index}>
<Link
to="#"
onClick={() => this.handleClick(item)}
className={
this.state.selectedItem?.name === item.name
? 'list-item-selected'
: 'list-item'
}
>
{item.order}. {item.name}
</Link>
</div>
);
});
}
}
或者您可以存盤選定的名稱
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/379269.html
標籤：javascript css 反应 班级 点击
上一篇：在類函式中獲取API
下一篇：如何使用陣列列印多個列舉值？