如何調用react-bootstrap中更改的選項卡上的事件

我已經使用React-Bootstrap在React應用程序中實現了導航選項卡。如何調用react-bootstrap中更改的選項卡上的事件

像這樣：

<Tabs defaultActiveKey={1}> 
    <Tab eventKey={1} title="Log in"> 
     {/* Irrelevant code */} 
    </Tab> 
    <Tab eventKey={1} title="Sign up"> 
     {/* Irrelevant code */} 
    </Tab> 
</Tabs>

現在就改變標籤，我想調用下面funtion：

changeTab(login) { 
    if (login) 
     this.setState({ heading: "Log in" }) 
    else 
     this.setState({ heading: "Sign up" }) 
}

凡login是一個布爾值，這將是true當選擇Log in選項卡和false選擇Sign up選項卡時。

我該怎麼做？

編輯：

我已經想通了，你可以打電話的時候，被點擊這樣的選項卡上的功能：

<Tabs defaultActiveKey={1} onClick={()=>this.changeTab()}> 
    <Tab eventKey={1} title="Log in"> 
     {/* Irrelevant code */} 
    </Tab> 
    <Tab eventKey={1} title="Sign up"> 
     {/* Irrelevant code */} 
    </Tab> 
</Tabs>

但我怎麼能知道點擊了哪個選項卡？我需要它根據點擊哪個標籤來改變狀態。

來源

2017-04-04 Barry Michael Doyle

你通過定義選項卡上的'onClick'事件，這樣的嘗試：'<標籤eventKey = { 1} title =「登錄」onClick = {（）=> this.changeTab（）}>' –

是的，我做了，它沒有工作，所以我現在問這裏。 –

哦，它確實是這樣工作的，不得不做一些修補，但是工作。謝謝。 –

我找到了解決方案。您需要在Tabs組件中使用onSelect。

像這樣：

<Tabs defaultActiveKey={1} onSelect={this.handleSelect()}> 
    <Tab eventKey={1} title="Log in"> 
     {/* Irrelevant code */} 
    </Tab> 
    <Tab eventKey={1} title="Sign up"> 
     {/* Irrelevant code */} 
    </Tab> 
</Tabs>

然後使它成爲您的handleSelect功能：

handleSelect(key) { 
    if (key === 1) 
     this.setState({ heading: "Log in" }) 
    else 
     this.setState({ heading: "Sign up" }) 
}

來源

2017-04-04 18:30:34

如何調用react-bootstrap中更改的選項卡上的事件

回答

相關問題