React Bootstrap Tab 不改变内容

Question

按照此处的示例使用 react-bootstrap（最新版本）：https : //react-bootstrap.github.io/components.html#navigation

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

预期：单击选项卡 2 标题，必须显示内容“选项卡 2 内容”我做错了什么？实际：单击选项卡 2 标题，内容“选项卡 1 内容”

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/