javascript - In React.js how do you create a link to change the active tab using react-bootstrap? -
i using react-bootstrap tabs , want create link within tab content changes active tab , opens second tab.
for example:
<tabs ...> <tab eventkey={1} ...> click <tablink eventkey={2} ...>link</tablink> </tab> <tab eventkey={2} ...> <tablink eventkey={2} ...> ... </tablink> </tab> </tabs>
obviously, tablink not exists component - , question how do this?
the tabs
component has prop called activekey
- use component's state control value (as shown in example), , use a
tag onclick link.
here's example, adapted 1 linked above - can't test right now, should give right idea.
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 </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> ); } });
Comments
Post a Comment