我正在使用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不作为组件存在-这是我的问题我该怎么做?
最佳答案
Tabs
组件具有一个名为activeKey
的属性-使用组件的状态来控制该值(as shown in this example),然后使用带有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>
);
}
});