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

【问题标题】：How can I change tabs in react-bootstrap using a button?如何使用按钮更改 react-bootstrap 中的选项卡？
【发布时间】：2017-10-25 11:18:42
【问题描述】：

如何使用 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>
  )
 }
}

【问题讨论】：

标签： reactjs button react-bootstrap

【解决方案1】：

this.state.key 是您所在州的数字，但按钮传递的是字符串 "3"。而是传递一个数字，<Tabs> 组件应该可以正常工作：

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

【讨论】：