usando un gancho personalizado para mostrar y ocultar el brindis, funciona bien cuando se invoca showTost en el botón del componente Toast cuando se usa este gancho fuera, es decir, en el botón del componente de la aplicación que recibe un error
TypeError Cannot read properties of null (reading 'defaultPrevented') Toast.show https://izso9.csb.app/node_modules/bootstrap/dist/js/bootstrap.esm.js:3399:19 showToast /src/useToast.js:11:12 8 | 9 | const showToast = () => { 10 | bsToast = new Toast(myToast, { autohide: true, delay: 1000 }); > 11 | bsToast.show(); | ^ 12 | }; 13 | 14 | const hideToast = () => { View compiledusarToast.js
import { Toast } from "bootstrap"; import { useRef } from "react"; export default function useToast() { const toastRef = useRef(); let myToast = toastRef.current; let bsToast = Toast.getInstance(myToast); const showToast = () => { bsToast = new Toast(myToast, { autohide: true, delay: 1000 }); bsToast.show(); }; const hideToast = () => { bsToast = new Toast(myToast, { autohide: true }); bsToast.hide(); }; return { toastRef, showToast, hideToast }; }Eso se debe a que no pasa el toastRef del componente de la aplicación y no está definido. Si agrega este fragmento de código dentro del componente de la aplicación, funcionará
<div className="toast position-absolute bottom-0 end-0 m-4" role="alert" ref={toastRef} > <div className="toast-header"> <strong className="me-auto">Bootstrap 5</strong> <small>4 mins ago</small> <button type="button" className="btn-close" onClick={hideToast} aria-label="Close" ></button> </div> <div className="toast-body">Hello, world! This is a toast message.</div> </div>Usé bootstrap 5 con Vuejs y tuve el mismo error. Descubrí que aparece el mismo error cuando se crea Toast en un lugar (en la creación del componente) y estoy llamando a toast.show () en otro lugar (en la actualización del componente).
Aquí hay un ejemplo:
export default { props: { toastHeader: String, toastBody: String, isHidden: Boolean }, data() { return { toast: null } }, created(){ //here toast initialized when component is created this.toast = new Toast(document.getElementById("bootstrap-toast")); }, updated(){ //component is updated, so toast is recreated in DOM. Error thrown if(!this.isHidden) this.toast.show(); } }Para resolver esto hice lo siguiente:
export default { props: { toastHeader: String, toastBody: String, isHidden: Boolean }, updated(){ let toast = new Toast(document.getElementById("bootstrap-toast")); if(!this.isHidden) toast.show(); } }Probablemente en su caso, es el mismo caso. Por lo tanto, toastRef.current podría contener algo no válido en el momento en que se activó el mostrar/ocultar el brindis. Intente usar document.getElementById dentro de new Toast() solo para verificar si es el caso exacto como el mío. Sé que parece extraño usar document.getElementById . Al menos te dará una idea de dónde está el problema.