Question

我正在尝试为应用程序创建登录模式表单。但是，我希望当我单击链接而不是按钮时出现弹出窗口。换句话说，当我单击导航栏中的登录链接时，我不想完全重定向到另一个页面。我只想弹出模式。

我对ReactJS还是很陌生，所以我不确定该怎么做。有人可以帮我了解如何使此功能正常工作吗？我真的很感激。

此外，如果有人知道如何实施适当的登录表单的大量资源，我也将不胜感激。我在CodePen上找到了一些，但是它们中的任何一个都没有真正显示出如何构建此组件的清晰而易行的方法。至少对于像我这样的初学者。

下面是我的代码。另外，如果有帮助，我提供了指向我当前正在使用的站点的链接，以作为构建此代码的参考。

资源：https://react-bootstrap.github.io/components/modal/

App.js

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from './components/Navbar/navbar.js';
import Footer from './components/Footer/footer.js';
import Home from './pages/Home/home.js';
import Login from './pages/Login/login.js';
import Languages from './pages/Languages/languages.js';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/languages" component={Languages}/>
          </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

export default App;

Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';
import './navbar.css';

const Navbar = () => {
    return (
        <nav className="navbar navbar-expand-sm navbar-dark px-sm-5">
            <div className="container">
                <Link to='/'>
                    <div className="navbar-brand">
                        <i class="fas fa-globe fa-2x"></i>
                    </div>
                </Link>

                <ul className="navbar-nav align-items-right">
                    <li className="nav-item ml-5">
                        <Link to="/login" className="nav-link">
                            Log In
                        </Link>
                    </li>
                    <li className="nav-item ml-5">
                        <Link to="/signup" className="nav-link">
                            Sign Up
                        </Link>
                    </li>
                </ul>
            </div>
        </nav>
    )
}

export default Navbar;

Login.js

import React, { Component } from 'react';
// import { connect } from 'react-redux';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import './login.css';

class Login extends Component {
    constructor(props, context) {
        super(props, context);

        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);

        this.state = {
          show: false,
        };
      }

      handleClose() {
        this.setState({ show: false });
      }

      handleShow() {
        this.setState({ show: true });
    }

    render() {
        return (
            <>
                <Button variant="primary" onClick={this.handleShow}>
                  Launch demo modal
                </Button>

                <Modal show={this.state.show} onHide={this.handleClose}>
                  <Modal.Header closeButton>
                    <Modal.Title>Login</Modal.Title>
                  </Modal.Header>
                  <Modal.Body>...</Modal.Body>
                  <Modal.Footer>
                    <Button variant="danger" onClick={this.handleClose}>
                      Cancel
                    </Button>
                  </Modal.Footer>
                </Modal>
            </>
        );
    }
}

export default Login;

Answer 1

让我们将导航栏重构为类组件。我们将需要跟踪state，并将binded函数传递给Login模式。

此外，看来您不再需要“登录”页面，因此让我们提取该标记，以便将其放置在组件中。我们称之为LoginModal

Navbar.js

import React from "react"
import { Link } from 'react-router-dom';
import './navbar.css';
import LoginModal from "./components/LoginModal


class Navbar extends React.Component{
  state = {
     modalOpen: false
  }

  handleModalOpen = () => {
     this.setState((prevState) => {
        return{
           modalOpen: !prevState.modalOpen
        }
     })
  }

  render(){
    return (
      <div>
        <nav className="navbar navbar-expand-sm navbar-dark px-sm-5">
            <div className="container">
                <Link to='/'>
                    <div className="navbar-brand">
                        <i class="fas fa-globe fa-2x"></i>
                    </div>
                </Link>

                <ul className="navbar-nav align-items-right">
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Log In
                        </a>
                    </li>
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Sign Up
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <LoginModal
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        />
      </div>
    )
  }
}

export default Navbar;

有关导航栏的注意事项：

它具有组件状态，可以跟踪模态的状态。
该模式被放置在nav jsx的末尾。
将Link组件替换为标准a-tag，并为其添加了一个 onClick处理程序
onClick处理程序handleModalOpen在我们的状态下切换值称为openModal。
openModal和handleModalOpen传递给LoginModal 组件。

现在让我们将Login重构为LoginModal。

LoginModal

import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import './login.css';

const LoginModal = (props) => { 
    return (
        <>
          <Modal show={props.modalOpen} onHide={props.handleModalOpen}>
              <Modal.Header closeButton>
                 <Modal.Title>Login</Modal.Title>
              </Modal.Header>
              <Modal.Body>...</Modal.Body>
              <Modal.Footer>
                 <Button variant="danger" onClick={props.handleModalOpen}>
                    Cancel
                 </Button>
              </Modal.Footer>
          </Modal>
        </>
     );
}

export default LoginModal;

有关LoginModal的说明

我们现在能够删除许多原始逻辑， LoginModal严格负责消费道具和显示内容。
我们使用prop值props.modalOpen，该值从导航栏，当在导航栏中单击按钮时，它将设置为true 导航栏组件。因此show={true}将显示模态
类似地，我们使用另一个道具props.handleModalOpen 父组件中的状态。当您在模式中调用该函数时，它将父项中的state.modalOpen更新为false。
该更新后的值将传递回LoginModal，设置 props.modalOpen为false，因此show = {false}从而关闭模态。

最近App.js可以是：

App.js

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from './components/Navbar/navbar.js';
import Footer from './components/Footer/footer.js';
import Home from './pages/Home/home.js';
import Languages from './pages/Languages/languages.js';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/languages" component={Languages}/>
          </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

export default App;

单击链接时如何显示弹出模式？

1 个答案:

Navbar.js

LoginModal

App.js