gpt4 book ai didi

javascript - React Material UI ListItem 单击

转载 作者:行者123 更新时间:2023-12-02 16:30:10 27 4
gpt4 key购买 nike

我想创建一个国家/地区列表,其中的 ListItem 是可单击的,并且每个 ListItem 在单击时都有一个靠近文本的图标。我创建了一个列表并实现了列表的可点击属性。但是,当我单击列表中的一个列表项时,我无法在 1 次单击中选择另一个项目,它首先取消选择前一个,然后选择另一个。这是包含我的实现的代码部分:

class CountryList extends Component {
constructor(props) {
super(props);
this.state = {clicked: false};
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(state => ({
clicked: !state.clicked
}));
}

render() {
const {classes} = this.props;
const { clicked } = this.state;

let listItems = myList.map((item) =>
<>
<ListItem className={ clicked ? classes.listItemClicked : classes.listItemNotClicked }
onClick={this.handleClick} classes={classes.ListItem} button key={item.id}>

{clicked ?
<ListItemIcon><DoneIcon style={{ color: 'rgb(239, 239, 239)', fontSize: '2.2rem' }}/></ListItemIcon>
: <ListItemIcon><DoneIcon style={{ display: 'none', color: 'rgb(239, 239, 239)', fontSize: '2.2rem', backgroundColor: 'rgb(239, 239, 239)' }}/></ListItemIcon>}

<ListItemText classes={{primary: classes.listItemText}} primary={item.value} />
</ListItem>
<Divider />
</>
);

return (
<List className={classes.list}>{listItems}</List>
);
}
}


const myList = [
{id: 1, value: 'Albania'}, {id: 2, value: 'Austria'}, {id: 3, value: 'Belarus'}, {id: 4, value: 'Belgium'},
{id: 5, value: 'Bosnia'}, {id: 6, value: 'Bulgaria'}, {id: 7, value: 'Croatia'}, {id: 8, value: 'Cyprus'},
{id: 9, value: 'Czech'}, {id: 10, value: 'Denmark'}, {id: 11, value: 'Estonia'}, {id: 12, value: 'Finland'},
{id: 13, value: 'France'}, {id: 14, value: 'Germany'}, {id: 15, value: 'Greece'}, {id: 16, value: 'Hungary'},
{id: 17, value: 'Iceland'}, {id: 18, value: 'Ireland'}, {id: 19, value: 'Italy'}, {id: 20, value: 'Latvia'},
{id: 21, value: 'Lithuania'}, {id: 22, value: 'Luxembourg'}, {id: 23, value: 'Macedonia'},
{id: 24, value: 'Malta'}, {id: 25, value: 'Moldova'}, {id: 26, value: 'Montenegro'},
{id: 27, value: 'Netherlands'}, {id: 28, value: 'Norway'}, {id: 29, value: 'Pakistan'},
{id: 30, value: 'Poland'}, {id: 31, value: 'Portugal'}, {id: 32, value: 'Romania'}, {id: 33, value: 'Russia'},
{id: 34, value: 'Serbia'}, {id: 35, value: 'Slovakia'}, {id: 36, value: 'Slovenia'},
{id: 37, value: 'Spain'}, {id: 38, value: 'Sweden'}, {id: 39, value: 'Switzerland'}, {id: 40, value: 'Turkey'},
{id: 41, value: 'Ukraine'}, {id: 42, value: 'Others'}
];

这是 App.js 文件中的代码:

<CountryList myList={myList} />

此外,我在文本前添加了一个图标。当我单击 1 个项目时,它会显示图标,但如果我的鼠标在它上面,它还会显示另一个元素图标。我想显示被点击元素的图标。我怎样才能做到这一点?

这是截图:

enter image description here

如果你仔细看,比利时旁边有一个图标。

这是 codesandbox 中代码的链接:https://codesandbox.io/s/gifted-snow-5p1gd?file=/src/Country.js

最佳答案

这是一个有效的 demo

您需要将事件列表项保持在某个状态,正如我在您的代码中看到的那样,它的 this.state.clicked 是一个 bool 值,所以现在您无法设置单击元素的样式,因为没有引用选择的元素

设置一个状态来保持点击的项目

this.state = { clickedItem: "" };

将onClick改为。

<ListItem
key={item.id}
className={
this.state.clickedItem === item.id
? classes.listItemClicked
: classes.listItemNotClicked
}
onClick={() => this.handleClick(item)}
>

在onCLick中将点击的项目设置为状态

handleClick(item) {
this.setState({
clickedItem: item.id
});
}

现在你在状态中有了点击的项目,在下一个渲染中(这将由于上面的状态变化而发生)你可以在渲染中有以下逻辑

<ListItem
key={item.id}
className={
this.state.clickedItem === item.id //if item.id === clickedItemId then add a separate css class
? classes.listItemClicked
: classes.listItemNotClicked
}
onClick={() => this.handleClick(item)}
>
<ListItemIcon>
//if item.id === clickedItemId then show the DoneIcon
{this.state.clickedItem === item.id && (
<DoneIcon
style={{ color: "rgb(239, 239, 239)", fontSize: "2.2rem" }}
/>
)}
</ListItemIcon>
<ListItemText primary={item.value} />
</ListItem>

关于javascript - React Material UI ListItem 单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63636823/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com