如何动态更改 reactjs 中的活动选项卡颜色

Question

我想更改动态选项卡上的活动选项卡颜色

这是我的代码..

    this.state={
               tab:[{id:1,tab:'Member'},{id:2,tab:'Request'},{id:3,tab:'Send-Request'},{id:4,tab:'Block'},{id:5,tab:'Search'}],
              active:'nav-link ',
            }
       }  btnClick=ind=>e=>{
          console.log(ind);
            this.state.tab.map((tab1,idx)=>{
               if(ind===idx){
                   this.setState({
                       active:'nav-link active'
                           })
                       }  })
       }
       render(){

          <div className="box bg-transparent">
              <div className="box-body padding-0">
                  <div className="nav nav-pills" id="v-pills-tab" 
                     role="tablist">                                            
            {this.state.tab.map((tab,ind)=>(

           <a onClick={this.btnClick(ind)} className={this.state.active} id="v-pills-member-tab" data-toggle="pill" href="#" role="tab"
   aria-controls="v-pills-member" aria-selected="true">{tab.tab}</a>

             ))}
          </div> 
       </div>  
</div>

成员请求发送请求块搜索

选项卡的结果

Answer 1

试试 className 作为

className={ tab.id === this.state.activeTab.id ? 'nav-link active' : '' }

还有，onBtnClick，使用下面的方法

onBtnClick(index) {
    this.setState({
        activeTab: this.state.tab[index]
    });
}

如何动态更改 reactjs 中的活动选项卡颜色

How To Change Active tabs Color in reactjs with dynamically

html

colors

dynamic

reactjs

react-tabs