React Material UI ListItem 单击

Question

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

\n

class CountryList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {clicked: false};\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick() {\n    this.setState(state => ({\n      clicked: !state.clicked\n    }));\n  }\n\n  render()\xc2\xa0{\n    const {classes} = this.props;\n    const { clicked } = this.state;\n\n    let listItems = myList.map((item) =>\n      <>\n        <ListItem className={ clicked ? classes.listItemClicked : classes.listItemNotClicked }\n          onClick={this.handleClick} classes={classes.ListItem} button key={item.id}>\n        \n            {clicked ? \n            <ListItemIcon><DoneIcon style={{ color: \'rgb(239, 239, 239)\', fontSize: \'2.2rem\' }}/></ListItemIcon>\n           : <ListItemIcon><DoneIcon style={{ display: \'none\', color: \'rgb(239, 239, 239)\', fontSize: \'2.2rem\', backgroundColor: \'rgb(239, 239, 239)\' }}/></ListItemIcon>}\n\n           <ListItemText classes={{primary: classes.listItemText}} primary={item.value} />\n       </ListItem>\n       <Divider /> \n      </>\n    );\n\n    return (\n      <List className={classes.list}>{listItems}</List>\n    );\n  }\n}\n\n\nconst myList = [\n  {id: 1, value: \'Albania\'}, {id: 2, value: \'Austria\'}, {id: 3, value: \'Belarus\'}, {id: 4, value: \'Belgium\'}, \n  {id: 5, value: \'Bosnia\'}, {id: 6, value: \'Bulgaria\'}, {id: 7, value: \'Croatia\'}, {id: 8, value: \'Cyprus\'}, \n  {id: 9, value: \'Czech\'}, {id: 10, value: \'Denmark\'}, {id: 11, value: \'Estonia\'}, {id: 12, value: \'Finland\'}, \n  {id: 13, value: \'France\'}, {id: 14, value: \'Germany\'}, {id: 15, value: \'Greece\'}, {id: 16, value: \'Hungary\'}, \n  {id: 17, value: \'Iceland\'}, {id: 18, value: \'Ireland\'}, {id: 19, value: \'Italy\'}, {id: 20, value: \'Latvia\'}, \n  {id: 21, value: \'Lithuania\'}, {id: 22, value: \'Luxembourg\'}, {id: 23, value: \'Macedonia\'}, \n  {id: 24, value: \'Malta\'}, {id: 25, value: \'Moldova\'}, {id: 26, value: \'Montenegro\'}, \n  {id: 27, value: \'Netherlands\'}, {id: 28, value: \'Norway\'}, {id: 29, value: \'Pakistan\'}, \n  {id: 30, value: \'Poland\'}, {id: 31, value: \'Portugal\'}, {id: 32, value: \'Romania\'}, {id: 33, value: \'Russia\'}, \n  {id: 34, value: \'Serbia\'}, {id: 35, value: \'Slovakia\'}, {id: 36, value: \'Slovenia\'}, \n  {id: 37, value: \'Spain\'}, {id: 38, value: \'Sweden\'}, {id: 39, value: \'Switzerland\'}, {id: 40, value: \'Turkey\'}, \n  {id: 41, value: \'Ukraine\'}, {id: 42, value: \'Others\'}\n];\n

\n

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

\n

<CountryList myList={myList} />\n

\n

另外，我在文本之前添加了一个图标。当我单击 1 个项目时，它会显示该图标，但是如果我的鼠标位于其上，它还会显示另一个元素图标。我想显示单击元素的图标。我怎样才能实现这个目标？

\n

这是截图：

\n

\n

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

\n

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

\n

Answer 1

这是一个工作演示

您需要将活动列表项保持在某种状态，正如我在代码中看到的那样，它this.state.clicked是一个布尔值，所以现在您没有办法设置单击元素的样式，因为没有对所选元素的引用

设置状态以保留单击的项目

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>