如何使用react-bootstrap从导航栏打开模式？

Question

目前，我有一个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> 

我不知道什么是eventKey，或者如果它的需要。但是我想打开我的模态（称为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}>

所以在这里你只需要调用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> 

希望的一个版本，它可以帮助