如何使用按鈕更改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>組件應該按照您的預期工作：