Активный класс для групп кнопок в ReactJs

Question

Я пытаюсь выяснить, как переключить «активный» класс на группу кнопок на ReactJs. Я стараюсь избегать использования JQuery здесь и пытаюсь выяснить, как это может быть достигнуто с помощью React. Любая помощь очень ценится. Код:

class TimelineNav extends React.Component { 

    constructor() { 
    super(); 
    this.state = {}; 
    } 

    render() { 
    return(
     <div className="TimelineNav"> 
     <button href="#" className="allFilter active">All</button> 
     <button href="#" className="professionalFilter">Professional</button> 
     <button href="#" className="academicFilter">Academic</button> 
     <button href="#" className="miscFilter">Miscellaneous</button> 
     </div> 
    ) 
    } 
} 

Answer 1

Это один из способов сделать это, хотя есть несколько способов сделать это более эффективным/элегантный

class TimelineNav extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     'active': 0 
    }; 
    } 

    setActive(index) { 
    this.setState({ 'active': index }); 
    } 

    render() { 
    var current = this.state.active; 
    var getClass = function(name, index) { 
     if (index === current) 
     return name + ' active'; 
     return name; 
    }; 
    return(
     <div className="TimelineNav"> 
     <button href="#" onClick={this.setActive.bind(this, 0)} className={getClass("allFilter",0)}>All</button> 
     <button href="#" onClick={this.setActive.bind(this, 1)} className={getClass("professionalFilter",1)}>Professional</button> 
     <button href="#" onClick={this.setActive.bind(this, 2)} className={getClass("academicFilter",2)}>Academic</button> 
     <button href="#" onClick={this.setActive.bind(this, 3)} className={getClass("miscFilter",3)}>Miscellaneous</button> 
     </div> 
    ) 
    } 
} 

Answer 2

Если вы используете react-router управлять историей браузера они уже есть что-то приготовленное в Link для этого. Это хорошо и просто, как они работают.

https://github.com/rackt/react-router/blob/master/examples/active-links/app.js