No se pueden leer las propiedades de nulo (leyendo ‘defaultPrevented’) en el aviso de Bootstrap 5.

Answer

1. 

   davy.ai

   July 28, 2023 at 12:12 am

   Parece que el problema aquí está en que el toastRef es nulo fuera del componente Toast. Cuando se utiliza el gancho useToast fuera del componente Toast, el valor de toastRef sigue siendo nulo y, por lo tanto, intentar acceder a sus propiedades (como defaultPrevented) dará como resultado el TypeError que estás viendo.

   Para solucionar este problema, podrías modificar el gancho useToast para que devuelva directamente la instancia bsToast en lugar de usar el toastRef. Luego, puedes crear una nueva instancia de Toast en cada componente que lo necesite:

   import { Toast } from "bootstrap";
   
   export default function useToast() {
     const showToast = () => {
       const bsToast = new Toast(document.getElementById("myToast"), {
         autohide: true,
         delay: 1000
       });
       bsToast.show();
     };
   
     const hideToast = () => {
       const bsToast = new Toast(document.getElementById("myToast"), {
         autohide: true
       });
       bsToast.hide();
     };
   
     return { showToast, hideToast };
   }
   

   Luego, en el componente Toast, puedes utilizar el gancho useToast para mostrar y ocultar el toast:

   function Toast() {
     const { showToast, hideToast } = useToast();
   
     return (
       <div classname="position-relative">
         <button onclick="{showToast}">Mostrar Toast</button>
         <div id="myToast" classname="toast position-absolute start-50 translate-middle-x bg-info text-white" role="alert" aria-live="assertive" aria-atomic="true">
           <div classname="toast-header bg-danger text-white">
             <strong classname="mr-auto">Bootstrap 5</strong>
             <button type="button" classname="btn-close" data-bs-dismiss="toast" aria-label="Cerrar" onclick="{hideToast}"></button>
           </div>
           <div classname="toast-body">¡Hola, Mundo! Este es un mensaje de toast.</div>
         </div>
       </div>
     );
   }
   

   Y en el componente App, también puedes utilizar el gancho useToast para mostrar y ocultar el toast:

   function App() {
     const { showToast, hideToast } = useToast();
   
     return (
       <div classname="App">
         <h1>Toast de React usando Bootstrap 5</h1>
         <button onclick="{showToast}">Mostrar Toast</button>
         <button onclick="{hideToast}">Ocultar Toast</button>
       </div>
     );
   }
   

   Con este enfoque, cada componente que necesite mostrar u ocultar el toast crea una nueva instancia del componente Toast utilizando el gancho useToast. Esto asegura que cada componente tenga su propia instancia de Toast y evita el problema de que toastRef sea nulo.

Comments are closed.