我如何从导航栏构建模式以与 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>
    );
  }
}

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

快到了：

除此之外，"Sign Up" 和 "Log In" 目前似乎是一个按钮。它们需要是 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 状态键 object，并且在您的 render() 方法中，您需要一个 if 语句来检查此 modalType 状态键以显示模态 body.

中的适当内容

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 so that you can control which type of modal to open from anywhere in your application, even if the components aren't related. Here 是一本有趣的读物，也是使用 redux 实现的模态逻辑示例。

我如何从导航栏构建模式以与 Bootstrap 反应？

How can I structure a modal from a navbar in react with Bootstrap?

reactjs

react-bootstrap

react-redux