Reactjs: Registerkarte beim Klicken auf Schaltfläche in Komponente

Question

Ich habe 2 Registerkarten, die beide die gleiche Komponente haben.

Mit einem Klick auf die Schaltfläche in Tab1 sollte Tab2 ausgewählt werden.

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

In dieser Geige

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> 
    ); 
    } 

Wie dies zu erreichen.

Answer 1

Wie von Keith einige Zustand in dieser Komponente und machen die Lasche gemäß den Zuständen der einzelnen Registerkarten definiert

`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> 

);