React-bootstrap：当我们点击登录菜单时弹出模式打开

Question

我有如下所示的组件。我想开阵营的自举模式弹出，当我“登录”菜单上单击：

export default class Navigation extends Component 
{ 
    render() { 
    return (
     <Navbar fixedTop inverse collapseOnSelect className="menu"> 
      <Navbar.Header> 
       <Navbar.Brand> 
         <a href="#"><Image src="Logo.png" alt="Ubibird" responsive/></a> 
       </Navbar.Brand> 
       <Navbar.Toggle /> 
      </Navbar.Header> 
      <Navbar.Collapse> 
       <Navbar.Form pullLeft> 
        <form> 
         <FormGroup id="search"> 
          <InputGroup> 
           <InputGroup.Addon className="glysearch"> <Glyphicon glyph="search" /></InputGroup.Addon> 
           <FormControl type="text" placeholder="Search" /> 
          </InputGroup> 
         </FormGroup> 
        </form> 
       </Navbar.Form> 
       <Nav pullRight> 
        **<NavItem eventKey={1} href="#">Login</NavItem>** 
        <NavItem eventKey={2} href="#">Sign Up</NavItem> 
       </Nav> 
      </Navbar.Collapse> 
     </Navbar> 
    ); 
    } 
} 

Answer 1

你不明确你有模态分量在你的代码，所以这里的完整的解决方案：

你需要一个独立的组件来呈现Bootstrap模式。代码将是：

constructor(props, context) { 
    this.state = {show: false}; 
} 

open =() => { 
    this.setState({show: true}); 
} 

close =() => { 
    this.setState({show: false}); 
} 

render() { 
    return (
    <Modal show={this.state.show} onHide={this.close}> 
     ... 
    </Modal> 
); 
} 

然后在您的导航组件中，您需要导入并渲染模态。然后将一个onClick听众添加到您的按钮手柄模式的开头：

openLoginModal =() => { 
    this.refs.loginModal.open(); 
} 

render() { 
    return (
    ... 
    <NavItem ref="loginModal" eventKey={1} href="#" onClick={this.openLoginModal}>Login</NavItem> 
    ... 
); 
}