[英]React Material UI ListItem Click
我想創建一個國家列表,其中的 ListItems 是可點擊的,並且每個 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 個項目時,它會顯示該圖標,但如果我的鼠標在其上,它還會顯示另一個元素圖標。 我想顯示被點擊元素的圖標。 我怎樣才能做到這一點?
這是屏幕截圖:
仔細看,比利時旁邊有一個圖標。
這是codesandbox中代碼的鏈接:https ://codesandbox.io/s/gifted-snow-5p1gd? file=/ src/Country.js
這是一個工作演示
您需要將活動列表項保持在某種狀態,正如我在您的代碼中看到的this.state.clicked
這是一個布爾值,因此現在您無法設置單擊元素的樣式,因為沒有引用選擇哪個
設置狀態以保留單擊的項目
this.state = { clickedItem: "" };
更改onClick to。
<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>
您必須使用索引映射單擊。 嘗試這個:
class CountryList extends Component { constructor(props) { super(props); this.state = {clicked: null}; this.handleClick = this.handleClick.bind(this); } handleClick(key) { this.setState(state => ({ clicked: key })); } render() { const {classes} = this.props; const { clicked } = this.state; let listItems = myList.map((item, index) => <> <ListItem className={ clicked == index ? classes.listItemClicked : classes.listItemNotClicked } onClick={this.handleClick} classes={classes.ListItem} button key={item.id}> {clicked == index ? <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'} ];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.