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> 

);