Как сделать так, чтобы всплывающее окно появлялось при нажатии на ссылку? - PullRequest
Новая
       54

Как сделать так, чтобы всплывающее окно появлялось при нажатии на ссылку?

0 голосов
/ 10 июля 2019

Я пытаюсь создать модальную форму для входа в приложение.Тем не менее, я хочу, чтобы всплывающее окно появлялось, когда я нажимал ссылку вместо кнопки.Другими словами, когда я нажимаю на ссылку входа в систему на панели навигации, я не хочу, чтобы меня перенаправляли на другую страницу целиком.Я просто хочу, чтобы модал всплыл.

Я очень новичок в 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;

Вход.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;

1 Ответ

0 голосов
/ 10 июля 2019

Давайте изменим ваш Navbar, чтобы он стал компонентом класса.Нам нужно отследить 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;

Примечания о Navbar:

  • Имеет состояние компонентакоторый отслеживает состояние модала.
  • Модал находится прямо в конце nav jsx.
  • Заменил компоненты Link стандартными a-тегами и дал им обработчик 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, которое передается из Navbar, оно устанавливается в true при нажатии кнопки внутри.компонент Navbar.Таким образом, 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;
...