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> 
    ... 
); 
}