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

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

angular - Is it possible to get native element for formControl? -

javascript - Why jQuery Select box change event is now working? -