Question

我正在构建一个导航栏，当我点击导航栏上的某个项目时，会弹出一个不同的模态窗体。

我想知道我应该如何实现这个，因为我尝试了但是当我点击不同的导航链接时，同样的表单总是出现。

例如，当我点击“添加图片”时，我想要一个模态表单，以显示图片标题和网址。如果我点击“注册”，我想要一个名称，密码，电子邮件显示的模态表单等。如何以正确的方式构建“isOpen”状态？

App.js

import React, { Component } from 'react';
import {NavBar} from './components/navbar.js';
import {AddPicModal} from './components/addPicModal.js';
import {SignUpForm} from './components/signupForm.js'
import './App.css';


class App extends Component {
  constructor(props){
    super(props);
    this.state ={isOpen: false};

  }

  showModal = () => {
    this.setState({ isOpen: true });
  };

  hideModal = () => {
    this.setState({ isOpen: false });
  };
  render() {

    return (
      <div className="App">
      <NavBar showModal={this.showModal}/>

      <AddPicModal
                isOpen={this.state.isOpen}
                onClose={this.hideModal}/>


      </div>
    );
  }
}

export default App;

AddPicModal.js

import React , {Component} from 'react';

import {Modal,Form, FormControl, FormGroup, ControlLabel, HelpBlock, Button} from 'react-bootstrap/lib';


function FieldGroup({ id, label, help, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}
export class AddPicModal extends Component{


    render(){
        console.log(this.props.isOpen);
        if(!this.props.isOpen){
            return null;
        }
        return(
            <div className="static-modal">
                <Modal.Dialog>
                    <Modal.Header>
                        <Modal.Title>Add New Picture</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <Form>
                            <FieldGroup
                                id="name"
                                type="text"
                                placeholder="Enter a title"/>
                            <FieldGroup
                                id="url"
                                type="text"
                                placeholder="Enter a URL"
                            />


                        </Form>
                    </Modal.Body>

                    <Modal.Footer>
                    <Button onClick={this.props.onClose}>Close</Button>
                    <Button  bsStyle="primary">Add</Button>
                    </Modal.Footer>
                </Modal.Dialog>
            </div>
            );
    }


}

NavBar.js

import React,{Component} from 'react';
 import {NavItem, Nav, Navbar} from 'react-bootstrap/lib';

 export class NavBar extends Component{

     render(){

         return(
             <Navbar inverse collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                  <a href="#brand">Pinterest</a>
                </Navbar.Brand>
                <Navbar.Toggle />
             </Navbar.Header>
    <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">
        Home
      </NavItem>
      <NavItem eventKey={2} href="#">
        My Wall
      </NavItem>
      <NavItem eventKey={3} href="#" onClick={this.props.showModal}>
      Add New Picture
      </NavItem>
    </Nav>
    <Nav pullRight>
      <NavItem eventKey={1} href="#" >
        Login
      </NavItem>
      <NavItem eventKey={2} href="#">
        Signup
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
             )
     }
 }

Answer 1

几个月前我遇到了同样的问题。

我所做的是我为我想要展示的不同形式创建了3种方法。首先，当我希望表单在我的render方法中显示时，我将状态设置为每个初始化为true的状态。我将表单中显示的内容状态传递给我的组件，然后我将它们称为道具，然后我会检查它们是否真实，以及它们是否呈现不同的形式。

import React from 'react';

import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';

import Login from '../components/Login';
import Register from '../components/Register';
import Forgotpassword from '../components/Forgotpassword';

class Header extends React.Component {
    constructor(props){
        super(props);

        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);

        this.showLogin = this.showLogin.bind(this);
        this.showRegister = this.showRegister.bind(this);
        this.showforgotPassword = this.showforgotPassword.bind(this);

        this.state = {
            show: false,
            showLogin: true,
            showRegister: false,
            showforgotPassword: false,
            isloggedIn: false,
            isIdle: false,
        }
    }

    handleClose(){
        this.setState({
            show:false,
            // When user closes modal, set screen back to login
            showLogin: true,
            showRegister: false,
            showforgotPassword: false,
        });
    }

    handleShow(){
        this.setState({
            show:true
        });
    }

    showLogin(){
        this.setState({
            showLogin: true,
            showRegister: false,
            showforgotPassword: false,
        })
    }

    showRegister(){
        this.setState({
            showLogin: false,
            showRegister: true,
            showforgotPassword: false,
        })
    }

    showforgotPassword(){
        this.setState({
            showLogin: false,
            showRegister: false,
            showforgotPassword: true,
        })
    }

    render(){
        const formState = [this.state.showLogin, this.state.showRegister, this.state.showforgotPassword];
        let showForm = null;

        if(formState[0] === true) {
            showForm = <Login showRegister={this.showRegister} showforgotPassword={this.showforgotPassword} />
        } else if(formState[1] === true) {
            showForm = <Register showLogin={this.showLogin} />
        } else if(formState[2] === true) {
            showForm = <Forgotpassword showLogin={this.showLogin} />
        }

        // console.log(this.state);

        return (
            <div className="header-container">
                <nav className="navbar navbar-dark bg-dark">
                    <Modal show={this.state.show} onHide={this.handleClose}>
                        <Modal.Body>
                            {showForm}
                        </Modal.Body>
                    </Modal>
                </nav>
            </div>
        )
    }
}

export default Header;

如何在同一页面上实现不同的模态表单？

1 个答案: