阵营引导标签在不改变内容

问题描述：

使用反应的自举以下这里的例子（最新版本）：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;

你是什么意思“的内容为标签“？ –

你确定密钥正在更新状态正确吗？ 'render（）'中的'console.log（this.state.key）'是否记录了正确的密钥？因为看起来你缺少一个'.bind（this）' – wgcrouch

看来，一旦我使用ES6类，React不再自动绑定......这也是解决方案。谢谢！ – iulia

答

一切工作对我来说只是如果我绑定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/

阵营引导标签在不改变内容

相关推荐