如何使用react-bootstrap從導航欄打開模式？

目前，我有一個nav如何使用react-bootstrap從導航欄打開模式？

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

我不知道什麼是eventKey，或者如果它的需要。但是我想打開我的模態（稱爲AuthModal），當其中任何一個被點擊。我想打開AuthModal傳遞屬性'login'或'signup'

這怎麼辦？如果有問題，我正在使用redux。

來源

2016-10-04 Shamoon

如果您看代碼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}>

所以在這裏你只需要調用open函數和關閉關閉它。所有工作都由反應狀態來完成。

如果你使用redux，你可以製作一個reducer，看看toggleModal是否爲false。通過一個動作，你可以將它分派給true。

這是你自己的問題

class NavInstance extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     showModal: false 
    } 
    } 

    handleToggleModal() { 
    this.setState(
     showModal: !this.state.showModal 
    ) 
    } 

    render() { 
    return (
     <div> 
     <Nav bsStyle="pills"> 
      <NavItem href="/home">NavItem 1 content</NavItem> 
      <NavItem title="Item">NavItem 2 content</NavItem> 
      <NavItem disabled>NavItem 3 content</NavItem> 
      <NavItem onClick={() => this.handleToggleModal()}>Show Modal</NavItem> 
     </Nav> 
     <MyModal show={this.state.showModal} /> 
     </div> 
    ) 
    } 
} 

const MyModal = ({ show }) => 
    <Modal show> 
    My Modal 
    </Modal>

希望的一個版本，它可以幫助

來源

2016-10-04 17:55:24 EQuimper

的模式是不同的組件。這是'Navbar'組件 – Shamoon

有沒有相當於'ng-click'，我可以放在'NavItem'上？ – Shamoon

你可以做同樣的事情，只需點擊導航欄即可調用模態。 – EQuimper

如何使用react-bootstrap從導航欄打開模式？

回答

相關問題