陣營引導標籤在不改變內容

使用反應的自舉以下這裏的例子（最新版本）：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;

來源

2017-10-20 iulia

你是什麼意思「的內容爲標籤「？ –

你確定密鑰正在更新狀態正確嗎？ '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/

來源

2017-10-20 09:45:19 Andrew

陣營引導標籤在不改變內容

回答

相關問題