如何从导航栏构建模态以与 Bootstrap 反应? [英] How can I structure a modal from a navbar in react with Bootstrap?

问题描述

我是 React 的新手，所以我提前道歉.这是我的导航栏组件:

import React, { Component } from 'react';从 './modals/AuthModal' 导入 AuthModal导入 { Nav, NavItem, Navbar, NavDropdown, MenuItem } from 'react-bootstrap'导出默认类 MyNavbar 扩展组件 {使成为() {返回 (<导航栏反转><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}>另一个动作</MenuItem><MenuItem eventKey={3.3}>这里还有别的东西</MenuItem><菜单项分隔符/><MenuItem eventKey={3.3}>单独的链接</MenuItem></NavDropdown></导航><Nav pullRight className="navright"><NavItem eventKey={1} href="#"><AuthModal/></NavItem></导航></Navbar.Collapse></导航栏>);}}

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

很近:

除此之外，注册"和登录"目前似乎是一个按钮.它们必须是 2 个单独的按钮.

在我的实际模态中，我有

import React, { Component } from 'react'import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'导出默认类 AuthModal 扩展组件 {构造函数(){极好的();this.render.bind(this);this.state = {showModal: false}}关闭() {this.setState({ showModal: false });}打开() {this.setState({ showModal: true });}句柄选择(事件键){event.preventDefault();警报(`选定的${eventKey}`)；}使成为 () {常量弹出=(<Popover id="modal-popover" title="popover">非常流行.这种参与</弹出框>);const 工具提示 = (<工具提示 id="modal-tooltip">哇.</工具提示>);返回 (<div><span onClick={this.open.bind(this)}>注册</span><span onClick={this.open.bind(this)}>登录</span><Modal show={this.state.showModal} onHide={this.close.bind(this)}><模态体><行><Col md={12}><Nav bsStyle='pills' activeKey={this.eventKey} onSelect={this.handleSelect}><NavItem eventKey={1} title="Item" ><span className="login-nav-tab">登录</span></NavItem><NavItem eventKey={1} title="Item" ><span className="login-nav-tab">注册</span></NavItem></导航></Col></行><Row className='top-space' ><表格><表单组><行><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="密码"/></Col></行><Row className='top-space'><Col md={5} mdOffset={1}><Checkbox className="checkbox-login">记住我</复选框></Col><Col md={6} className='forgot-password'><a href="">忘记密码</a></Col></行><Row className='top-space'><Col md={10} mdOffset={1}><Button bsStyle="btn btn-black btn-block">登录</Button></Col></行></FormGroup></表单></行><hr></hr><行><Col md={12} className="text-center">用 blah 登录</Col></行><Row className="top-space"><Col md={6}><Button bsStyle='btn btn-block btn-danger'>谷歌</按钮></Col><Col md={6}><Button bsStyle='btn btn-block btn-info'>Facebook</按钮></Col></行></Modal.Body><模态.页脚><Button onClick={this.close.bind(this)}>Close</Button></Modal.Footer></模态>

)}}

我怎样才能拥有它，以便导航中有 2 个单独的链接和一个模式.根据您点击的那个，模态将显示注册内容或登录内容?

解决方案

您可以修改您的 open() 实例方法以接受一个参数，该参数将告诉您要显示的模态内容及其值将使用 setState 存储在组件的状态中，例如状态对象的 modalType 键，并且在您的 render() 方法中，您将想要有一个 if 语句来检查这个 modalType 状态键，以在你的模态正文中显示适当的内容.

export default class AuthModal extends Component {const MODAL_TYPE_LOGIN = 1, MODAL_TYPE_SIGNUP = 2;构造函数(){极好的();this.render.bind(this);this.state = {显示模式:假}}关闭() {this.setState({ showModal: false });}打开(模态类型){this.setState({showModal: 真,modalType: modalType});}句柄选择(事件键){event.preventDefault();警报(`选定的${eventKey}`)；}使成为 () {常量弹出=(<Popover id="modal-popover" title="popover">非常流行.这种参与</弹出框>);const 工具提示 = (<工具提示 id="modal-tooltip">哇.</工具提示>);返回 (<div><span onClick={this.open.bind(this, MODAL_TYPE_SIGNUP)}>注册</span><span onClick={this.open.bind(this, MODAL_TYPE_LOGIN)}>登录</span><Modal show={this.state.showModal} onHide={this.close.bind(this)}><模态体><行><Col md={12}><Nav bsStyle='pills' activeKey={this.eventKey} onSelect={this.handleSelect}><NavItem eventKey={1} title="Item" ><span className="login-nav-tab">登录</span></NavItem><NavItem eventKey={1} title="Item" ><span className="login-nav-tab">注册</span></NavItem></导航></Col></行>{this.state.modalType == MODAL_TYPE_LOGIN ?(<Row className='top-space' ><表格><表单组><行><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="密码"/></Col></行><Row className='top-space'><Col md={5} mdOffset={1}><Checkbox className="checkbox-login">记住我</复选框></Col><Col md={6} className='forgot-password'><a href="">忘记密码</a></Col></行><Row className='top-space'><Col md={10} mdOffset={1}><Button bsStyle="btn btn-black btn-block">登录</Button></Col></行></FormGroup></表单></行><hr></hr><行><Col md={12} className="text-center">用 blah 登录</Col></行><Row className="top-space"><Col md={6}><Button bsStyle='btn btn-block btn-danger'>谷歌</按钮></Col><Col md={6}><Button bsStyle='btn btn-block btn-info'>Facebook</按钮></Col></行>) : (<div>您的注册表单在此处</div>)}</Modal.Body><模态.页脚><Button onClick={this.close.bind(this)}>Close</Button></Modal.Footer></模态>

)}}

不过，理想情况下，您希望使用 redux 以便您可以控制要打开的模态类型应用程序中的任何地方，即使组件不相关.这里 是使用 redux 实现的模态逻辑的有趣阅读和示例.

I'm new to React, so I apologize in advance. Here's my navbar component:

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

I need my nav to look like:

It's close:

Except, "Sign Up" and "Log In" appear to be one button currently. They need to be 2 separate buttons.

In my actual modal, I have

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

}

How can I have it so there's 2 separate links in the nav, and one modal. Depending on which one you click, the modal will either show the signup stuff or the sign in stuff?

解决方案

You could modify your open() instance method to accept an argument that would tell which of the modal's content to show and it's value would be stored in the component's state with setState, in say a modalType key of the state object, and in your render() method you will want to have an if statement to check against this modalType state key to display the appropriate content inside your modal's 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>
    )
  }
}

Though, ideally you would want to use 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 is an interesting read and example of a modal logic implemented using redux.

这篇关于如何从导航栏构建模态以与 Bootstrap 反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！