Reactjs：点击组件中按钮的开关选项卡

Question

我有2个选项卡，它们都具有相同的组件。

单击tab1中的按钮时，应选择tab2。

http://jsfiddle.net/rzv6Lrjh/93/

在这种小提琴

render: function() { 
    return (
     <div> 
     <Tabs selected={0}> 
      <Pane label="Tab 1"> 

      <Tickets key='1'/> 
      </Pane> 
      <Pane label="Tab 2"> 
      <Tickets key='2'/> 
      </Pane> 
     </Tabs> 
     </div> 
    ); 
    } 

如何实现这一目标。

Answer 1

正如基思解释保持一些状态在此组件和根据对每个标签定义的状态呈现的标签

`this.state =

 this.statetab = { 
    index: 1, 
    fixedIndex: 1, 
    inverseIndex: 0 
    }; 

    handleFixedTabChange(index){ 
    alert(index) 
    this.setState({fixedIndex: index}); 
    }; 

    handleInverseTabChange(index){ 
    this.setState({inverseIndex: index}); 
    }; 


const Tabb =() => 
(
<section> 
     <Tabs {...this.props} index={this.statetab.index} onChange={this.handleTabChange.bind(this)}> 
      <Tab label='Primary'><small>Primary content</small></Tab> 
      <Tab label='Secondary' onActive={this.handleActive.bind(this)}><small>Secondary content</small></Tab> 
      <Tab label='Third' disabled><small>Disabled content</small></Tab> 
      <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab> 
      <Tab label='Fifth'><small>Fifth content</small></Tab> 
     </Tabs> 
     <h5>Fixed Tabs</h5> 
     <Tabs index={this.statetab.fixedIndex} onChange={this.handleFixedTabChange.bind(this)} fixed> 
      <Tab label='First'><small>First Content</small></Tab> 
      <Tab label='Second'><small>Second Content</small></Tab> 
      <Tab label='Third'><small>Third Content</small></Tab> 
     </Tabs> 
     <h5>Inverse Tabs</h5> 
     <Tabs index={this.statetab.inverseIndex} onChange={this.handleInverseTabChange.bind(this)} inverse> 
      <Tab label='First'><small>First Content</small></Tab> 
      <Tab label='Second'><small>Second Content</small></Tab> 
      <Tab label='Third'><small>Third Content</small></Tab> 
      <Tab label='Disabled' disabled><small>Disabled Content</small></Tab> 
     </Tabs> 
     </section> 

);