如何在Bootstrap反应中从导航栏构造模态？

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

我需要我的导航看起来像：

它很接近：

除此之外，“注册”和“登录”似乎是一个当前按钮。他们需要是2个独立的按钮。

在我实际的模式，我有

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

} 

我怎么能有这么有净资产值2个独立的环节，一个模式。取决于你点击哪一个，模式将显示注册内容或注册内容？

Answer 1

您可以修改您的open()实例方法接受一个参数，会告诉该模式的内容的显示，它的价值将被存储在该组件的状态setState中说，国家目标的modalType关键，而在您的render()方法，您将希望有一个if声明来检查这个modalType状态键以显示您的模态正文内适当的内容。

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实现的模态逻辑的例子。