Cómo implementar un componente modal en React

Introducción

Los modales son ventanas independientes dentro de una aplicación, generalmente como un cuadro de diálogo. Son un patrón común de interfaz de usuario para proporcionar información o solicitar confirmación.

En este tutorial aprenderás a implementar un componente modal en tu proyecto React. Crearás un Dashboardcomponente para administrar el estado y un botón para acceder al modal. También desarrollarás un Modalcomponente para crear un modal y un botón para cerrar. Tu proyecto mostrará y cerrará un modal al hacer clic en un botón.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Es necesario tener conocimientos básicos de React antes de comenzar este tutorial. Puedes aprender más sobre React siguiendo la serie Cómo codificar en React.js .

Paso 1: iniciar el Dashboardcomponente

El panel es donde mostrarás tu modal. Para comenzar con el panel, importa una instancia de React y el Componentobjeto en tu Dashboard.jsarchivo. Declara un Dashboardcomponente y establece su estado:

Tablero de mandos.js

import React, { Component } from "react";class Dashboard extends Component {  constructor() {    super();    this.state = {      show: false    };    this.showModal = this.showModal.bind(this);    this.hideModal = this.hideModal.bind(this);  }  showModal = () = {    this.setState({ show: true });  };  hideModal = () = {    this.setState({ show: false });  };}export default Dashboard

Su estado incluye la propiedad showcon el valor false. Esto le permite ocultar el modal hasta que un usuario le solicite que lo abra. Las funciones showModal()actualizan su estado con el .setState()método para cambiar el valor de su showpropiedad a truecuando un usuario abre el modal. Del mismo modo, el .setState()método en su hideModal()función cerrará el modal y cambiará el valor en su showpropiedad a false.

Nota: Recuerde vincular sus funciones al constructor()usar el .bind()método.

Una vez que haya aplicado su estado y funciones, su render()método de ciclo de vida se encargará de mostrar su modal dentro de la return()declaración:

Tablero de mandos.js

import React, { Component } from "react";class Dashboard extends Component {  // ...  render() {    return (      main        h1React Modal/h1        button type="button" onClick={this.showModal}          Open        /button      /main    );  }}export default Dashboard

Acepta buttonel atributo React JSX onClickpara aplicar la .showModal()función y abrir el modal. Exportarás tu Dashboardcomponente a un componente de orden superior Appconectado a tu archivo HTML raíz.

Paso 2: construcción del Modalcomponente

Cree un nuevo archivo Modal.jsy declare un componente funcional sin estado Modalcon tres argumentos, handleClose, showy children. El argumento showrepresenta la showpropiedad en su estado:

Modal.js

import './modal.css';const Modal = ({ handleClose, show, children }) = {  const showHideClassName = show ? "modal display-block" : "modal display-none";  return (    div className={showHideClassName}      section className="modal-main"        {children}        button type="button" onClick={handleClose}          Close        /button      /section    /div  );};

Su return()declaración pasa el argumento children, representado como props.children, es una referencia a la funcionalidad de abrir y cerrar el modal. El modal también contiene un botón con un atributo React JSX onClickque acepta el hideModal()método, representado aquí como el argumento handleClose, pasado como props a su Dashboardcomponente.

La variable showHideClassNameasigna su valor a una condición para verificar si el valor de la showpropiedad en su estado es true. Si es así, aparecerá el modal. De lo contrario, se ocultará. Las propiedades display-blocky display-nonepara mostrar y ocultar el modal se manejan a través del modal.cssarchivo importado en su Modalcomponente.

Inicie un nuevo archivo modal.cssy establezca las reglas para diseñar el tamaño, el color y la forma de su archivo Modal:

modal.css

.modal {  position: fixed;  top: 0;  left: 0;  width:100%;  height: 100%;  background: rgba(0, 0, 0, 0.6);}.modal-main {  position:fixed;  background: white;  width: 80%;  height: auto;  top:50%;  left:50%;  transform: translate(-50%,-50%);}.display-block {  display: block;}.display-none {  display: none;}

Esto producirá un modal centrado con un contorno de cuadro blanco y un fondo sombreado. Una vez que haya Modalcompletado el componente, integrémoslo en su Dashboard.

Paso 3 — Incorporación del Modalcomponente

Para combinar su Modalen su Dashboard, navegue hasta su Dashboard.jsarchivo e importe su Modalcomponente debajo de su instancia de React:

Tablero de mandos.js

import React, { Component } from "react";import Modal from './Modal.js';class Dashboard extends Component {  // ...  render() {    return (      main        h1React Modal/h1        Modal show={this.state.show} handleClose={this.hideModal}          pModal/p        /Modal        button type="button" onClick={this.showModal}          Open        /button      /main    );  }}export default Dashboard

En su return()declaración, incluya su Modalcomponente para mostrar y ocultar el modal. Los atributos showy handleCloseson propiedades de su Modalcomponente para administrar la lógica de su estado y la hideModal()función.

Sus componentes Dashboardy Modalahora se mostrarán en su navegador:

Observe cómo ahora se abre y se cierra su nuevo Modalcomponente.

Conclusión

En este tutorial, aprendió cómo se puede usar React para implementar modales pasando propiedades y funcionalidades de un componente a otro.

Para ver este proyecto en vivo, aquí hay una demostración de CodePen de este proyecto.