反応起動ストラップ付きのナビゲーションバーからモーダルを開くにはどうすればよいですか？

Question

現在、私はそれが必要ならeventKeyがあるかわからないnav

<Nav pullRight className="navright"> 
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem> 
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? 'hidden' : ''}>Login</NavItem> 
    <NavItem eventKey={1} href="#" className={this.state.signedIn ? 'hidden' : ''}>Sign Up</NavItem> 
    </Nav> 

を持っています。しかし、どちらかをクリックすると、私は自分のモーダル（AuthModalと呼ぶ）を開きたいです。開いてみたいAuthModal属性が'login'または'signup'に設定されている

どのようにすることができますか？私はreduxを使用しています。

Answer 1

このコードを見ると、eventKeyはアラートのみです。あなたは番号のパスに注意してください;）

function handleSelect(selectedKey) { 
    alert('selected ' + selectedKey); 
} 

const navInstance = (
    <Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}> 
    <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem> 
    <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem> 
    <NavItem eventKey={3} disabled>NavItem 3 content</NavItem> 
    </Nav> 
); 

モーダルコードを表示したい場合は、

getInitialState() { // This is the old way but can work 
    return { showModal: false }; 
    }, 

constructor() { // New way 
    super(); 
    this.state = { 
    showModal: false 
    } 
} 



    close() { 
    this.setState({ showModal: false }); 
    }, 

    open() { 
    this.setState({ showModal: true }); 
    }, 

---

そして、あなたのモーダル必要このコード<Modal show={this.state.showModal} onHide={this.close}>

だからここにあなただけのオープン関数とその近くのクローズを呼び出す必要があります。すべての反応の状態で働いています。

reduxを使用している場合は、toggleModalがfalseかどうかを確認する減速機を作成できます。そしてアクションでそれを真実にディスパッチすることができます。

これは