反应切换类 [英] React toggle class

查看：32
本文介绍了反应切换类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<div><h1>组件</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>

<input type="text" placeholder="" className="input" onChange={(e)=>this.searchSpace(e)}/><div className="card">{项目}

解决方案

您只跟踪具有一个变量(活动)的状态，但您需要单独跟踪每个状态.试试这个:

更新以处理切换:

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

<div><h1>组件</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>

<input type="text" placeholder="" className="input" onChange={(e)=>this.searchSpace(e)}/><div className={this.state.active ?卡片":列表"}>{项目}

I want toggle class only click element. But now when i click anyone they are all active. And when i click a tag, i want add another class to card div. How should i update the code? 

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


<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="card">
     {items}
   </div>
</div>

解决方案

You are only tracking the state with one variable (active), but you need to keep track of each state separately. Try this:

Updated to handle toggle:

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


<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>

这篇关于反应切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆