Estoy haciendo una web en HTML, CSS y JS simple. Estoy planeando convertir esto en ReactJS. Aunque planeo convertir esto en un solo archivo JSX para exportarlo a App.js. Mi amigo me recomendó usar componentes con estilo para poder convertirlo todo en un solo archivo JSX.
El problema es que tengo un botón que muestra un cuadro modal cuando se hace clic, usando la función en JS simple. Actualmente, tengo problemas para implementar la función en ReactJS.
Mi código en React se parece un poco a esto:
//The Exported page import React, {useState} from "react"; import styled from "styled-components"; export function InfoCalon(){ return( <CustomStyle> <div class="content-container"> <button id="button1" class="button" >Button 1</button> </div> <div id="modal" class="modalpopup"> <div class="modal-content"> //Modal Contents </div> </div> </CustomStyle> ) } const CustomStyle = styled.div` background-color: black; color: white; .button { border: none; min-width: 30%; height: auto; display: inline-flexbox; text-align: center; text-decoration: none; margin: 10px 10% 10px 10%; transition-duration: 0.2s; cursor: pointer; } .button:hover{ transform: scale(1.02); } .button:active{ transform: scale(0.97); transition-duration: 0.05s; } .modalpopup { display: none; //The attribute that I want to change on button1 click to display: block. position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #102037; margin: 7% auto; position: relative; padding: 1% 3% 3% 3%; width: 80%; } `Intenté usar onClick en el botón e hice una función para mostrar el modal, pero siempre fallaba y obtenía errores como "var is null()".
Antes de convertir a ReactJS, el código en el archivo JS era:
var btn1 = document.getElementById("button1"); btn1.onclick = function() { modal.style.display = "block"; }Para el código HTML y CSS, es casi todo lo que está en CustomStyle.
Agradecería cualquier respuesta al respecto, gracias.
En el componente InfoCalon, puede mantener un estado interno que define si el modal está abierto o no
const [isOpen, setIsOpen] = useState(false);Ahora, para alternar esto, debe adjuntar un detector de eventos al botón como este
<button id="button1" onClick={(e) => setIsOpen(!isIsOpen)} class="button" >Button 1</button>Ahora todo lo que necesita hacer es representar condicionalmente el modal, es decir, solo mostrar el modal si isOpen es verdadero.
{isOpen && (<div id="modal" class="modalpopup"> <div class="modal-content"> //Modal Contents </div> </div>)}Y también debe eliminar la visualización: ninguno de los estilos del modal.
styled-component React, por lo que puede pasarles accesorios. Sugeriría agregar un isClicked ( o similar ) al componente InfoCalon y actualizarlo desde un controlador de clic adjunto al botón. Pase el valor isClicked como accesorio al componente CustomStyle .
export function InfoCalon() { const [isClicked, setIsClicked] = React.useState(false); const clickHandler = () => setIsClicked(clicked => !clicked); return( <CustomStyle isClicked={isClicked}> <div class="content-container"> <button id="button1" class="button" onClick={clickHandler}> Button 1 </button> </div> <div id="modal" class="modalpopup"> <div class="modal-content"> //Modal Contents </div> </div> </CustomStyle> ) } Use una función de accesorios para acceder al accesorio isClicked y establezca la regla de visualización en consecuencia.
const CustomStyle = styled.div` ... .modalpopup { display: ${({ isClicked }) => isClicked ? "block" : "none"}; ... } ... `; Un diseño mejorado podría ser dividir todo el CSS en varios componentes de estilo individuales, donde cada uno puede tomar sus propios accesorios. Podría, por ejemplo, hacer que el div modal sea su propio componente y pasarle un accesorio isOpen directamente para establecer el estilo.
Ejemplo
const Modal = styled.div` display: ${({ isOpen }) => isOpen ? "block" : "none"}; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); `; const ModalContent = styled.div` background-color: #102037; margin: 7% auto; position: relative; padding: 1% 3% 3% 3%; width: 80%; `; export function InfoCalon() { const [isOpen, setIsOpen] = React.useState(false); const toggleModal = () => setIsOpen(open => !open); return( <CustomStyle isClicked={isClicked}> <div class="content-container"> <button id="button1" class="button" onClick={toggleModal}> Button 1 </button> </div> <Modal id="modal"> <ModalContent> // Modal Contents </ModalContent> </Modal> </CustomStyle> ) }