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

Question

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

我是 ReactJS 的新手，所以我不确定该怎么做。有人可以帮我了解如何让这个功能发挥作用吗？非常感谢。

此外，如果有人知道一些关于如何实现正确登录表单的重要资源，我也将不胜感激。我在 CodePen 上找到了一些，但其中 none 确实展示了如何构建此组件的清晰易懂的方法。至少，对于像我这样的初学者。

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

资源：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

让我们将您的导航栏重构为 class-component。我们需要跟踪 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;

关于导航栏的说明：

它有一个跟踪模态状态的组件状态。
模态框位于导航 jsx 的末尾。
用标准 a-tags 替换了 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 严格只负责消费道具和显示内容。
我们使用从导航栏，当按钮在导航栏组件。所以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;

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

How To Make Popup Modal Appear When Clicking a Link?

reactjs

react-redux

react-bootstrap

react-modal

Navbar.js

登录模式

App.js