Saltar al contenido

Reaccionar modal tutorial utilizando hooksSep, 19thIn este tutorial, vamos a aprender acerca de cómo crear un referente en …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear un modal en reaccionar usando ganchos.

Introducción

En primer lugar, vamos a establecer una nueva aplicación por reaccionan mediante el siguiente comando.

npx create-react-app react-modal

Ahora cambiar el directorio de trabajo actual utilizando los siguientes comandos. Estado

cd react-modal
npm start # to start the development server

modal inicialización

Ahora abra la carpeta reaccionar modal en el editor de código favorito y navegar al archivo app.js y reemplazar con el código de abajo.

import React, { useState } from "react";import "./styles.css";

function App() {
const [show, setShow] = useState(false); const openModal = () => setShow(true);
const closeModal = () => setShow(false);

return (

Creating react modal

{!show && }

);
}

export default App;

En el código anterior, primero se importó useState gancho de reaccionar paquete y inicializado con un valuefalse.

El useState gancho devuelve una matriz con dos propiedades que se muestran y setShow.setShow es una función que se utiliza para actualizar el estado. funciones

El closeModal y openModal se utilizan para abrir y cerrar la modal.

también hemos añadido! Mostrar delante de elemento de botón, cuando botón sólo hace que cuando un modal no está abierto.

Creación modal componente

Hemos inicializado nuestro estado y funciones modal en el apartado anterior, ahora vamos a crear un componente modal.

crear un nuevo archivo llamado Modal.js en la carpeta src y añadir el siguiente código.

import React from "react";

function Modal(props) {
const { show, closeModal } = props;
return (
<>

Modal heading

This is modal content


);
}

export default Modal;

En el código anterior, el componente modal está aceptando dos apoyos (Mostrar, closeModal) y hemos añadido una condición ternaria a div elemento.

{show ? "modal" : "hide"}

Significa que estamos añadiendo una clase modal para div elemento único espectáculo si se prop cierto lo contrario estamos añadiendo clase ocultar.

Usando uso modal de componentes

Vamos ahora el componente modal mediante la importación dentro de archivos app.js.

import React from "react";
import Modal from './Modal.js';

function App() {
const [show, setShow] = useState(false);

const openModal = () => setShow(true);
const closeModal = () => setShow(false);

return (

Creating react modal

{!show && }

);
}

clases Adición de CSS

dentro de su archivo style.css añadir el siguiente estilos. La prueba de

.App {
margin: 1rem auto;
max-width: 1000px;
padding: 1rem;
}

.show {
display: block;
}

.hide {
display: none;
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0000003a;
transition: opacity 0.2s ease;
}

.modal {
width: 500px;
position: relative;
margin: 0px auto;
padding: 20px;
background-color: #fff;
border-radius: 2px;
transform: translateY(100%);
transition: transform 0.2s ease;
box-shadow: 0 2px 8px 3px;
font-family: Helvetica, Arial, sans-serif;
}

.modal button {
position: absolute;
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
padding: 0.5rem;
margin: 0 auto;
border-radius: 50%;
box-shadow: 1px 1px 1px #0000003a;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.562);
}

dejar que nuestros modales ahora navegando a localhost: 3000.

Si hace clic en el botón Mostrar modal verá una abierta modal con un botón de cierre como en la imagen abajo.

Una cosa que falta en su modal que está superpuesta, abra el archivo de actualización y Modal.js withbelow código.

import React from "react";

function Modal(props) {
const { show, closeModal } = props;

return (
<>

Modal heading

This is modal content


);
}

export default Modal;

Aquí hemos añadido un elemento div con la clase de superposición y onclick por lo que podemos también cerca de nuestra modal haciendo clic en superposición. La prueba de

dejar que nuestros modal de nuevo.

Bono

Reaccionar Portales ayuda prestarle el componente exterior del DOM normal de flujo en vez de traer al lado del componente padre.

Sintaxis

ReactDOM.createPortal(child, container)

Cuando es niño es un elemento reaccionan y el contenedor es un elemento DOM tenemos que hacer que el niño.

Mediante el uso de portales podemos resolver las cuestiones de estilo, porque los elementos primarios estilos se aplican a los elementos secundarios en css, cada vez que estamos creando modales o herramientas que necesitamos para hacer que fuera desde el elemento padre de modo que los estilos de los padres no se aplican al niño .

El uso de portales para prestar nuestro modal componente

En primer lugar, tenemos que añadir un nuevo elemento HTML en nuestro index.html.

Añadir un elemento a continuación a su etiqueta de cuerpo.

Ahora abrir su archivo Modal.js y la actualización con código de abajo.

import React from "react";
import ReactDOM from "react-dom";
function Modal(props) {
const { show, closeModal } = props;
const modal = (<>

Modal heading

This is modal content

)
return ReactDOM.createPortal( modal, document.getElementById("modal-root") );}

export default Modal;

Ahora estamos rindiendo nuestro componente modal dentro del nodo DOM-modal raíz que acaba de agregar dentro archivo index.html.