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

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

很接近：

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

在我的实际模态中，我有

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> ) } } }状态键，用于在模态体内显示相应的内容。

{{1}}

尽管如此，理想情况下，您可能希望使用redux，以便您可以控制在应用程序的任何位置打开哪种类型的模式，即使组件不相关也是如此。 Here是一个有趣的读物和使用redux实现的模态逻辑的例子。

如何在与Bootstrap反应的导航栏中构建模态？

1 个答案: