how to add a class of the selected tab ?

[MingXingTeam]

I do it as this, but the first tab seems not clickable.

getInitialState() {
return {
      selectedIndex: 0
    };
},
handleSelect(index, last) {
    this.setState({
       selectedIndex: index
    });
}

tabs:

<Tabs
onSelect={this.handleSelect}
selectedIndex={0}
 >
  <TabList>
     <Tab>
      <div className={
cx({"bg-color-w": (this.state.selectedIndex == 0?true:false)
                            })}>涨幅榜
</div>
...

please give me a hint~~thanks very much. 😃

[joepvl]

Try using selectedIndex={ this.state.selectedIndex } instead :). That way, the component will rerender when you change the state in your handleSelect method, updating the view to show the tab you selected. To illustrate, here's a JSBin example that has a <div> inside the <Tab>, like your example code: http://jsbin.com/wifelo/edit?css,js,output (uses an ES6 class instead of React.createClass, but the principle is the same).

Alternatively, the package adds a classname of ReactTabs__Tab--selected and a selected attribute to selected <Tab>s, so you can use those in your CSS if you want instead.

[MingXingTeam]

Thanks for your awesome answer!! 😄

[joepvl]

My pleasure! Looks like this issue can be closed now.