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

あなたはあなたのコード内で持っているモーダル・コンポーネント明らかにしていないので、ここで完全なソリューションがあります：

あなたはブートストラップモーダルをレンダリングする別のコンポーネントが必要です。コードは次のようになります。

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