React Bootstrap Tab 不改变内容答案

【问题标题】：React Bootstrap Tab not changing contentReact Bootstrap Tab 不改变内容
【发布时间】：2017-10-20 08:50:50
【问题描述】：

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

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

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

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;

【问题讨论】：

“标签内容”是什么意思？
您确定该状态下的密钥更新正确吗？ console.log(this.state.key) 中的 render() 是否记录了正确的密钥？看起来您缺少.bind(this)
似乎一旦我使用 ES6 类，React 不再自动绑定..这也是解决方案。谢谢！

标签： twitter-bootstrap reactjs tabs

【解决方案1】：

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

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/

【讨论】：