如何使用按钮更改react-bootstrap中的选项卡？

Question

如何使用React/React-Bootstrap单击按钮来更改选项卡？例如，点击一个按钮，它让我去选择的标签。下面 代码：

import React, {Component} from 'react' 
import { Tabs, Tab } from 'react-bootstrap'; 

export default class TabPuzzle extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
    key: 2 
    }; 
this.handleSelect = this.handleSelect.bind(this) 
} 
handleSelect(key) { 
    alert('selected ' + key); 
    this.setState({key}); 
} 
render() { 
    return (
    <div> 
     <Tabs activeKey={this.state.key} onSelect={this.handleSelect} 
     id="controlled-tab-example"> 
       <Tab eventKey={1} title="Tab 1"> Tab Content 1 </Tab> 
       <Tab eventKey={2} title="Tab 2"> Tab Content 2 </Tab> 
       <Tab eventKey={3} title="Tab 3"> Tab Content 3 </Tab> 
     </Tabs> 
      <button onClick={()=>this.handleSelect("3")}>Go to tab 3</button> 
    </div> 
) 
} 
} 

Answer 1

this.state.key是在你的状态的号码，但按钮传递字符串"3"。通过一个数字，而<Tabs>组件应该按照您的预期工作：