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

正如keith所解释的那样在此组件中保持一些状态并根据为每个选项卡定义的状态呈现选项卡

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

);