Question

使用react-bootstrap（最新版本），例如：https://react-bootstrap.github.io/components.html#navigation

以下代码正确更改了状态中的键，但未显示选项卡的内容。

预期：点击标签2标题，内容＆＃34;标签2内容＆＃34;必须表明我做错了什么？实际：点击标签2标题，内容＆＃34;标签1内容＆＃34;

import { Tabs, Tab } from 'react-bootstrap';

class ClosableTabs extends Component {

    constructor(props) {
        super(props);    
        this.state = {
            key: 1
        };
    }

    handleSelect(key) {
        console.log('selected' + key);
        this.setState({key: key});
    }

    render() {

        console.log(this.state.key);

        return (
            <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example">
                <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
                <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
                <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>
            </Tabs>
        )
    }
}

export default ClosableTabs;

Answer 1

只要我绑定handleSelect：

，一切都适合我

class ClosableTabs extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      key: 1
    };
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelect(key) {
    console.log('selected' + key);
    this.setState({ key: key });
  }

  render() {

    console.log(this.state.key);

    return (
      <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example">
        <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
        <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
        <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>
      </Tabs>
    )
  }
}

http://jsfiddle.net/e0agpgt2/90/

React Bootstrap Tab不更改内容

1 个答案: