javascript - 在 React.js 中，如何使用 React-bootstrap 创建链接来更改事件选项卡？

Question

我正在使用React-bootstrap Tabs我想在我的选项卡内容中创建一个链接，以更改事件选项卡并打开第二个选项卡。

例如:

<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 的属性 - 使用组件的状态来控制该值 ( as shown in this example )，然后使用 a 标记，并为您的链接添加 onClick。

这是一个示例，改编 self 上面链接的示例 - 我现在无法测试它，但它应该为您提供正确的想法。

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