Javascript 反应切换类

我想切换类只点击元素。但现在，当我点击任何人时，他们都处于活动状态。当我单击一个标记时，我想向card div添加另一个类。我应该如何更新代码

 handleClick() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    }

 handleClick() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    }

组件
this.searchSpace（e）}/>
{items}

您仅使用一个变量（活动）跟踪状态，但需要分别跟踪每个状态。试试这个：

更新为处理切换：

组件
this.searchSpace（e）}/>
{items}

您应该使用多个状态变量，并使用函数更新状态，因此当您将购物车图标设置为活动状态时，列表图标状态不会改变。 请参见下面的示例。如果有帮助，请告诉我

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cartIconActive: false,
      listIconActive: false,
    };
    this.handleCartIconClick = this.handleCartIconClick.bind(this);
    this.handleListIconClick = this.handleListIconClick.bind(this);
  }

  handleCartIconClick() {
    this.setState((prevState) => ({
      ...prevState,
      cartIconActive: !prevState.cartIconActive,
    }));
  }

  handleListIconClick() {
    this.setState((prevState) => ({
      ...prevState,
      listIconActive: !prevState.listIconActive,
    }));
  }

  render() {
    const { cartIconActive, listIconActive } = this.state;
    return (
      <div className="container">
        <div>
          <h1>Components</h1>
          <div>
            <a
              href="#"
              onClick={this.handleCartIconClick}
              className={cartIconActive ? 'card-icon active' : 'card-icon'}
            >
              click
            </a>
            <a
              href="#"
              onClick={this.handleListIconClick}
              className={listIconActive ? 'list-icon active' : 'list-icon'}
            >
              click
            </a>
          </div>
        </div>
        <input
          type="text"
          placeholder=""
          className="input"
          onChange={(e) => this.searchSpace(e)}
        />
        <div className="card">{items}</div>
      </div>
    );
  }
}

类MyComp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
cartIconActive:false，
listIconActive:false，
};
this.handleCartIconClick=this.handleCartIconClick.bind（this）；
this.handleListIconClick=this.handleListIconClick.bind（this）；
}
HandleParticonClick（）{
this.setState（（prevState）=>({
…国家，
cartIconActive:！prevState.cartIconActive，
}));
}
handleListIconClick（）{
this.setState（（prevState）=>({
…国家，
listIconActive:！prevState.listIconActive，
}));
}
render（）{
const{cartIconActive，listIconActive}=this.state；
返回(
组件
this.searchSpace（e）}
/>
{items}
);
}
}

谢谢！没关系，但我无法正确解释。当我单击的元素处于活动状态时，另一个元素不应处于活动状态。因此您希望将其切换而不是同时处于活动状态？是的，同时该类应将卡片更改为列表谢谢！这几乎发生了，但当我单击两个时，一个标记处于活动状态：（是否添加了！for！this.state.active？“列表图标处于活动状态”？

<div className="container">
   <div>
     <h1>Components</h1>
     <div>
        <a href="#" onClick={this.handleClick.bind(this)} className= {this.state.active ? "card-icon active" : "card-icon"}>click</a>
        <a href="#" onClick={this.handleClick.bind(this)} className= {!this.state.active ? "list-icon active" : "list-icon"}>click</a>
     </div>
   </div>
   <input type="text" placeholder="" className="input" onChange={(e)=>this.searchSpace(e)}  />
   <div className={this.state.active ? "card" : "list"}>
     {items}
   </div>
</div>

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cartIconActive: false,
      listIconActive: false,
    };
    this.handleCartIconClick = this.handleCartIconClick.bind(this);
    this.handleListIconClick = this.handleListIconClick.bind(this);
  }

  handleCartIconClick() {
    this.setState((prevState) => ({
      ...prevState,
      cartIconActive: !prevState.cartIconActive,
    }));
  }

  handleListIconClick() {
    this.setState((prevState) => ({
      ...prevState,
      listIconActive: !prevState.listIconActive,
    }));
  }

  render() {
    const { cartIconActive, listIconActive } = this.state;
    return (
      <div className="container">
        <div>
          <h1>Components</h1>
          <div>
            <a
              href="#"
              onClick={this.handleCartIconClick}
              className={cartIconActive ? 'card-icon active' : 'card-icon'}
            >
              click
            </a>
            <a
              href="#"
              onClick={this.handleListIconClick}
              className={listIconActive ? 'list-icon active' : 'list-icon'}
            >
              click
            </a>
          </div>
        </div>
        <input
          type="text"
          placeholder=""
          className="input"
          onChange={(e) => this.searchSpace(e)}
        />
        <div className="card">{items}</div>
      </div>
    );
  }
}