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>

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

1 个答案: