es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Función de gancho (hook) de inserción de React en la clase de exportación de React.

12 Jul, 2023 Programación

¿Alguna idea para un componente modal sin usar hooks y usarlo dentro de otro componente basado en clases?

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

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <button variant="primary" onclick="{handleShow}">
        Lanzar modal demo
      </button>

      <modal show="{show}" onhide="{handleClose}">
        <modal.header closebutton="">
          <modal.title>Encabezado del modal</modal.title>
        </modal.header>
        <modal.body>¡Hurra! ¡Estás leyendo este texto en un modal!</modal.body>
        <modal.footer>
          <button variant="secondary" onclick="{handleClose}">
            Cerrar
          </button>
          <button variant="primary" onclick="{handleClose}">
            Guardar cambios
          </button>
        </modal.footer>
      </modal>

  );
}

render(<example></example>);
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes crear un componente modal sin utilizar hooks y usarlo dentro de otro componente basado en clase. Aquí tienes un ejemplo de implementación:

    import React, { Component } from 'react';
import { Modal, Button } from 'react-bootstrap';

class MyModal extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  handleClose = () => {
    this.setState({ show: false });
  }

  handleShow = () => {
    this.setState({ show: true });
  }

  render() {
    return (
      <div>
        <button variant="primary" onclick="{this.handleShow}">
          Abrir modal de demostración
        </button>

        <modal show="{this.state.show}" onhide="{this.handleClose}">
          <modal.header closebutton="">
            <modal.title>Título del modal</modal.title>
          </modal.header>
          <modal.body>¡Woohoo, estás leyendo este texto en un modal!</modal.body>
          <modal.footer>
            <button variant="secondary" onclick="{this.handleClose}">
              Cerrar
            </button>
            <button variant="primary" onclick="{this.handleClose}">
              Guardar cambios
            </button>
          </modal.footer>
        </modal>
      </div>
    );
  }
}

class Example extends Component {
  render() {
    return (
      <div>
        <h1>Mi componente de ejemplo</h1>
        <mymodal></mymodal>
      </div>
    );
  }
}

export default Example;

    En este ejemplo, MyModal es un componente basado en clase que administra su propio estado con this.state.show. Tiene los métodos handleClose y handleShow que actualizan el estado para controlar la visibilidad del modal.

    Luego, MyModal se usa dentro de Example como un componente hijo. Cuando se hace clic en el botón de MyModal, el modal cambiará su visibilidad.

    Este es solo un ejemplo de cómo puedes crear un componente modal sin utilizar hooks y usarlo dentro de un componente basado en clase. Hay muchas otras formas en las que podrías implementar esto.

Comments are closed.