映射列表中项目的 onClick() 颜色更改不起作用

Question

我有一个项目列表显示在 React class 组件的 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;
}

Answer 1

您应该将所选项目存储在状态中。试试这个：

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>
      );
    });
  }
}

或者您可以存储选定的名称

映射列表中项目的 onClick() 颜色更改不起作用

onClick() color change for item in mapped list not working

javascript

css

class

onclick

reactjs