Reagieren CSS-Klasse dynamisch hinzufügen

Question

Ich habe eine Reihe von Tabs und ich mag andere Klasse auf die ausgewählten Registerkarte anzuwenden:

Meine Komponente:

constructor(props) { 
    super(props); 

    this.state = { 
     activeTab: false, 
    }; 
} 

setActiveTab =()=> { 
    this.state.activeTab=true 
} 

render() { 


    return (
     <HtmlPage> 

      <div className="tab"> 

       <InternalLink to={`/settings/user-profile`} > 
        <div className="tablinks">Nutzerprofil</div> 
       </InternalLink> 
       <InternalLink to={`/settings/company-profile`} > 
        <div className={this.state.activeTab ? 'active':'tablinks'} onClick={this.setActiveTab}>Firmenprofil</div> 
       </InternalLink> 
       <InternalLink to={`/settings/user-profile`} > 
        <div className="tablinks">Nutzerverwaltung</div> 
       </InternalLink> 

      </div> 

      <div className="content"> 
       {this.props.children} 
      </div> 


     </HtmlPage> 
    ); 
} 

Und meinen css:

/* Style the tab */ 
div.tab { 
    padding-top: 1%; 
    overflow: hidden; 
    border: 1px solid #ccc; 
} 

/* Style the buttons inside the tab */ 
div.tab .tablinks { 
    background-color: inherit; 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    transition: 0.3s; 
    font-size: 20px; 
} 

/* Change background color of buttons on hover */ 
div.tab .tablinks:hover { 
    background-color: #ddd; 
} 

/* Create an active/current tablink class */ 
div.tab .active { 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    transition: 0.3s; 
    font-size: 20px; 
    background-color: #ccc; 
} 

Dadurch wird die Klasse jedoch nur für die erste angeklickte Registerkarte aktiviert und nicht jedes Mal, wenn ich eine andere Registerkarte auswähle. Wie kann ich es reparieren?

Answer 1

einen Namen für die aktive Registerkarte klicken Sie auf Set, und vergleichen Sie dann, während die Klasse wie

constructor(props) { 
    super(props); 

    this.state = { 
     activeTab: '', 
    }; 
} 
setActiveTab = (val, e)=> { 
    this.setState({activeTab: val}) 
} 
<div className="tab"> 

       <InternalLink to={`/settings/user-profile`} > 
        <div className={this.state.activeTab == 'user-profile' ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile')}>Nutzerprofil</div> 
       </InternalLink> 
       <InternalLink to={`/settings/company-profile`} > 
        <div className={this.state.activeTab == 'company-profile ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'company-profile')}>Firmenprofil</div> 
       </InternalLink> 
       <InternalLink to={`/settings/user-profile`} > 
        <div className={this.state.activeTab == 'user-profile1 ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile2')}>Nutzerverwaltung</div> 
       </InternalLink> 

      </div>