Twitter bootstrap 反应引导选项卡不更改内容

使用react引导（最新版本），如下所示：

以下代码正确地更改了处于该状态的键，但未显示选项卡的内容

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

从'react bootstrap'导入{Tabs，Tab}；
类ClosableTabs扩展组件{
建造师（道具）{
超级（道具）；
此.state={
关键词：1
};
}
handleSelect（键）{
console.log（'selected'+键）；
this.setState（{key:key}）；
}
render（）{
console.log（this.state.key）；
返回(
表1内容
表2内容
表3内容
)
}
}
导出默认ClosableTabs；

只要我绑定了手柄，一切都对我有效选择：

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>
    )
  }
}

类ClosableTabs扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 关键词：1 }; this.handleSelect=this.handleSelect.bind（this）； } handleSelect（键）{ console.log（'selected'+键）； this.setState（{key:key}）； } render（）{ console.log（this.state.key）； 返回( 表1内容 表2内容 表3内容 ) } }

---

您所说的“选项卡内容”是什么意思？您确定密钥在状态下已正确更新吗？

render（）中的
console.log（this.state.key）
是否记录了正确的键？看起来您缺少了一个
.bind（this）
似乎一旦我使用ES6类，React就不再自动绑定了。这也是解决方案。谢谢
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>
    )
  }
}