反应 JS 切换 Class

Question

我有一个正在使用 React JS 开发的项目。问题是我有一个按钮，当我单击它时，我只想更改单击按钮上的图标。但是我点击的所有按钮上的图标都会改变。我的代码如下。

constructor(props){
super(props)
this.state={
    icon: false
}
}

active = (event) => {
    this.setState({icon: !this.state.icon})           
}

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={icon ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>

我该如何解决这个问题？

Answer 1

举例说明如何select 特定。现场演示 https://codesandbox.io/s/focused-browser-fls2w

export default class Abc extends Component {
  constructor(props) {
    super(props);
    this.state = { icon: false };
  }
  active = item => {
    this.setState({ icon: item });
  };
  render() {
    const menu = ["A", "B", "C", "A", "B", "C", "A", "B", "C"];
    return (
      <div className="nav_menu">
        <ul>
          {menu.map((item, index) => (
            <li
              key={index}
              onClick={() => this.active(index)}
              style={{ color: this.state.icon === index ? "red" : "" }}
            >
              {item}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Answer 2

只有一个变量是不够的，因为您没有存储已单击哪个按钮索引以准确地仅显示该按钮上的图标。

constructor(props){
super(props)
this.state={
    icon: false,
    clickedIndex: -1,
}
}

active = (clickedIndex)=> (event) => {
    this.setState(prevState => ({icon: !prevState.icon, clickedIndex }));          
}

.....

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
<ul>
    {menu.map((item,index) => 
        <li key = {index}>
            <Link data-id = {index} className="inactive" to={`${match.url}`} onClick={this.active(index)}>
                <span>
                    <span>
                        <FontAwesomeIcon icon={faHome} className="icon"/>
                    </span>
                    {item}
                </span>
                <FontAwesomeIcon data-id = {index} icon={(icon && index === this.state.clickedIndex) ? faAngleDown:faAngleRight} className="angle"/>
            </Link>
        </li>
    )}
</ul>

反应 JS 切换 Class

React JS Toogle Class

toggle

reactjs