reactjs - 如何使用按钮更改 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>组件应该按您的预期工作:

<button onClick={()=>this.handleSelect(3)}>Go to tab 3</button>