单击链接时如何使弹出模式出现？

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 函数传递给登录模式。

此外，您似乎不再需要登录页面，所以让我们提取该标记，以便将其放入组件中。我们称之为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 的末尾。
• 用标准的 a-tag 替换了 Link 组件，并给了它们一个 onClick 处理程序
• onClick 处理程序，handleModalOpen 在我们的状态中切换一个值 称为 openModal。
• openModal 和 handleModalOpen 被传递给 LoginModal 组件。

所以现在让我们将Login 重构为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 只负责消费 props 和 显示内容。
• 我们使用 props.modalOpen 的 props.modalOpen 值，它是从 导航栏，当在 导航栏组件。所以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;