どのように私は、ブートストラップと反応してnavbarからモーダルを構成できますか？

Question

私はReactを初めて使うので、事前にお詫び申し上げます。ここに私のナビゲーションバーコンポーネントです：

import React, { Component } from 'react'; 
import AuthModal from './modals/AuthModal' 
import { Nav, NavItem, Navbar, NavDropdown, MenuItem } from 'react-bootstrap' 

export default class MyNavbar extends Component { 

    render() { 

    return (
     <Navbar inverse> 
     <Navbar.Header> 
      <Navbar.Brand> 
      <span className="logo">SITE</span> 
      </Navbar.Brand> 
      <Navbar.Toggle /> 
     </Navbar.Header> 
     <Navbar.Collapse> 
      <Nav className="navleft"> 
      <NavItem eventKey={1} href="#">Link</NavItem> 
      <NavItem eventKey={2} href="#">Link</NavItem> 
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> 
       <MenuItem eventKey={3.1}>Action</MenuItem> 
       <MenuItem eventKey={3.2}>Another action</MenuItem> 
       <MenuItem eventKey={3.3}>Something else here</MenuItem> 
       <MenuItem divider /> 
       <MenuItem eventKey={3.3}>Separated link</MenuItem> 
      </NavDropdown> 
      </Nav> 
      <Nav pullRight className="navright"> 
      <NavItem eventKey={1} href="#"><AuthModal/></NavItem> 
      </Nav> 
     </Navbar.Collapse> 
     </Navbar> 
    ); 
    } 
} 

私が見えるように私のNAVを必要とする：

それは近いです：

除き、「サインアップ」と一つのように見える「ログイン」ボタンをクリックします。彼らは2つの別個のボタンである必要があります。私の実際のモーダルで

、私は、ナビゲーション中に2つの独立したリンク、および1つのモーダルがありますので、私はそれを持つことができますどのように

import React, { Component } from 'react' 
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap' 


export default class AuthModal extends Component { 

    constructor() { 
    super(); 
    this.render.bind(this); 
    this.state = {showModal: false} 
    } 

    close() { 
    this.setState({ showModal: false }); 
    } 

    open() { 
    this.setState({ showModal: true }); 
    } 

    handleSelect(eventKey) { 
    event.preventDefault(); 
    alert(`selected ${eventKey}`); 
    } 
    render() { 
    const popover = (
     <Popover id="modal-popover" title="popover"> 
     very popover. such engagement 
     </Popover> 
    ); 
    const tooltip = (
     <Tooltip id="modal-tooltip"> 
     wow. 
     </Tooltip> 
    ); 
    return (
     <div> 
     <span onClick={this.open.bind(this)}>Sign Up</span> 
     <span onClick={this.open.bind(this)}>Log In</span> 

     <Modal show={this.state.showModal} onHide={this.close.bind(this)}> 
      <Modal.Body> 
      <Row> 
       <Col md={12}> 
       <Nav bsStyle='pills' activeKey={this.eventKey} onSelect={this.handleSelect}> 
        <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem> 
        <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem> 
       </Nav> 
       </Col> 
      </Row> 
      <Row className='top-space' > 
       <form> 
       <FormGroup > 
        <Row> 
        <Col md={12}> 
         <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/> 
         <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/> 
        </Col> 
        </Row> 
        <Row className='top-space'> 
        <Col md={5} mdOffset={1}> 
         <Checkbox className="checkbox-login"> Remember Me </Checkbox> 
        </Col> 
        <Col md={6} className='forgot-password'> 
         <a href="">Forgot Password</a> 
        </Col> 
        </Row> 
        <Row className='top-space'> 
        <Col md={10} mdOffset={1}> 
         <Button bsStyle="btn btn-black btn-block">Login</Button> 
        </Col> 
        </Row> 
       </FormGroup> 
       </form> 
      </Row> 
      <hr></hr> 

      <Row> 
       <Col md={12} className="text-center"> 
       Login with blah 
       </Col> 
      </Row> 
      <Row className="top-space"> 
       <Col md={6}> 
       <Button bsStyle='btn btn-block btn-danger'> 
        Google 
       </Button> 
       </Col> 
       <Col md={6}> 
       <Button bsStyle='btn btn-block btn-info'> 
        Facebook 
       </Button> 
       </Col> 
      </Row> 


      </Modal.Body> 
      <Modal.Footer> 
      <Button onClick={this.close.bind(this)}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
     </div> 
    ) 
    } 

} 

を持っています。あなたがクリックしたものに応じて、モーダルはサインアップのものかサインインのものを表示しますか？

Answer 1

あなたが表示するために、モーダルのコンテンツの言うだろう引数を受け入れるようにopen()インスタンスメソッドを変更することができ、それは価値が状態オブジェクトのmodalTypeキーと言うでは、とで、setStateとコンポーネントの状態に格納されるのですrender()メソッドを使用すると、このmodalType状態キーと照合して、モーダルの本文内に適切な内容を表示するためのifステートメントが必要になります。

export default class AuthModal extends Component { 
    const MODAL_TYPE_LOGIN = 1, MODAL_TYPE_SIGNUP = 2; 

    constructor() { 
    super(); 
    this.render.bind(this); 
    this.state = { 
     showModal: false 
    } 
    } 

    close() { 
    this.setState({ showModal: false }); 
    } 

    open(modalType) { 
    this.setState({ 
     showModal: true, 
     modalType: modalType 
    }); 
    } 

    handleSelect(eventKey) { 
    event.preventDefault(); 
    alert(`selected ${eventKey}`); 
    } 

    render() { 
    const popover = (
     <Popover id="modal-popover" title="popover"> 
     very popover. such engagement 
     </Popover> 
    ); 
    const tooltip = (
     <Tooltip id="modal-tooltip"> 
     wow. 
     </Tooltip> 
    ); 
    return (
     <div> 
     <span onClick={this.open.bind(this, MODAL_TYPE_SIGNUP)}>Sign Up</span> 
     <span onClick={this.open.bind(this, MODAL_TYPE_LOGIN)}>Log In</span> 

     <Modal show={this.state.showModal} onHide={this.close.bind(this)}> 
      <Modal.Body> 
      <Row> 
       <Col md={12}> 
       <Nav bsStyle='pills' activeKey={this.eventKey} onSelect={this.handleSelect}> 
        <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem> 
        <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem> 
       </Nav> 
       </Col> 
      </Row> 
      {this.state.modalType == MODAL_TYPE_LOGIN ? (
       <Row className='top-space' > 
       <form> 
        <FormGroup > 
        <Row> 
         <Col md={12}> 
         <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/> 
         <input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/> 
         </Col> 
        </Row> 
        <Row className='top-space'> 
         <Col md={5} mdOffset={1}> 
         <Checkbox className="checkbox-login"> Remember Me </Checkbox> 
         </Col> 
         <Col md={6} className='forgot-password'> 
         <a href="">Forgot Password</a> 
         </Col> 
        </Row> 
        <Row className='top-space'> 
         <Col md={10} mdOffset={1}> 
         <Button bsStyle="btn btn-black btn-block">Login</Button> 
         </Col> 
        </Row> 
        </FormGroup> 
       </form> 
       </Row> 
       <hr></hr> 

       <Row> 
       <Col md={12} className="text-center"> 
       Login with blah 
       </Col> 
       </Row> 
       <Row className="top-space"> 
       <Col md={6}> 
        <Button bsStyle='btn btn-block btn-danger'> 
        Google 
        </Button> 
       </Col> 
       <Col md={6}> 
        <Button bsStyle='btn btn-block btn-info'> 
        Facebook 
        </Button> 
       </Col> 
       </Row> 
      ) : (
       <div>Your sign-up form goes in here</div> 
      )} 
      </Modal.Body> 
      <Modal.Footer> 
      <Button onClick={this.close.bind(this)}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
     </div> 
    ) 
    } 
} 

ものの、理想的にあなたがコンポーネントが関連していない場合でも、アプリケーション内のどこからでも開くことがモーダルの種類を制御することができるように、reduxを使用したいと思います。 Hereは、reduxを使用して実装されたモーダルロジックの興味深い読んだ例です。