In React.js反応起動ストラップを使用してアクティブなタブを変更するリンクを作成するにはどうすればよいですか？

Question

私はReact-bootstrap Tabsを使用しています。アクティブなタブを変更して2番目のタブを開くタブコンテンツ内にリンクを作成したいとします。例えば

：

<Tabs ...> 
    <Tab eventKey={1} ...> 
     Click this <TabLink eventKey={2} ...>link</TabLink> 
    </Tab> 
    <Tab eventKey={2} ...> 
     <TabLink eventKey={2} ...> 
     ... 
     </TabLink> 
    </Tab> 
</Tabs> 

はもちろん、TabLinkは、構成要素として存在していない - これは私の質問私はこれをどのように行うかありますか？あなたのリンクのためのonClickでaタグを使用し、その値（as shown in this example）を制御するためにあなたのコンポーネントの状態を使用し、そして -

Answer 1

TabsコンポーネントはactiveKeyと呼ばれる小道具を持っています。

ここでは、私が上記にリンクされているものから順応しています。私は今、それをテストすることはできませんが、正しいアイデアを与えるべきです。

const LinkedTabs = React.createClass({ 
    getInitialState() { 
    return { 
     key: 1 
    }; 
    }, 

    goToTab(key) { 
    this.setState({key}); 
    }, 

    render() { 
    return (
     <Tabs activeKey={this.state.key}> 
     <Tab eventKey={1} title="Tab 1"> 
      <span>Click this </span><a onClick={() => this.goToTab(2)}>link</a> 
     </Tab> 
     <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab> 
     <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab> 
     </Tabs> 
    ); 
    } 
});