反応ブートストラップで変更されたタブでイベントを呼び出す方法

Question

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> 

今、私は、次の目的球を呼び出すしたいタブを変更する上：

loginは Log inタブが選択されたときのために trueなりブールある

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

このよう

Sign upタブが選択されている場合はfalseです。

どうすればいいですか？

編集：

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

しかし、どのように私がクリックされたタブを知ることができます。

私はあなたがタブは、次のようにクリックされたときに関数を呼び出すことができますことを考え出しましたか？どのタブがクリックされたかに基づいて状態を変更する必要があります。

Answer 1

解決策が見つかりました。 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機能します： `<タブのeventKey = {：あなたはこのように、タブ上の` onClick`イベントを定義することにより、

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