在React.js中，如何使用react-bootstrap創建鏈接以更改活動選項卡？

Question

我正在使用React-bootstrap選項卡 ，我想在我的選項卡內容中創建一個鏈接，以更改活動選項卡並打開第二個選項卡。

例如：

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

顯然，TabLink不作為組件存在-這是我的問題我該怎么做？

Answer 1

Tabs組件具有一個稱為activeKey的道具-使用組件的狀態來控制該值（ 如本示例所示 ），然后使用帶有onClick a標記作為鏈接。

這是一個示例，它是根據我上面鏈接的內容改編而成的-我目前無法對其進行測試，但它應該為您提供正確的想法。

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