如何使用 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>
)
}
}
最佳答案
this.state.key
是您所在州的一个数字,但按钮正在传递一个字符串 "3"
.而是传递一个数字,然后 <Tabs>
组件应该按您的预期工作:
<button onClick={()=>this.handleSelect(3)}>Go to tab 3</button>
关于reactjs - 如何使用按钮更改 react-bootstrap 中的选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44169787/