无法在引导程序 5 toast 中读取 null 的属性(读取“defaultPrevented”)
Posted
技术标签:
【中文标题】无法在引导程序 5 toast 中读取 null 的属性(读取“defaultPrevented”)【英文标题】:Cannot read properties of null (reading 'defaultPrevented') in bootstrap 5 toast 【发布时间】:2021-12-23 08:44:07 【问题描述】:使用自定义挂钩显示和隐藏 toast,当在外部使用此挂钩时,在 Toast 组件按钮中调用 showTost
时,它可以正常工作,即在 App 组件按钮中出现错误
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 compiled
使用Toast.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 ;
CODE SANDBOX LINK
【问题讨论】:
单击任一按钮时,我看到同样的错误。 【参考方案1】:那是因为您没有从 App 组件传递 toastRef
并且它是未定义的。如果你在 App 组件中添加这段代码,它就可以工作了
<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>
【讨论】:
如果我想根据 api 状态码对任何成功响应调用 toast ,我该怎么做? 这是一个广泛的问题。这将取决于您的实现,所以我无法回答,但可以肯定的是,您必须抽象出 toast 组件并在任何您想要的地方调用它【参考方案2】:我在 Vuejs 中使用了 bootstrap 5 并且遇到了同样的错误。我发现在一个地方(在组件创建时)创建 Toast 并且我在另一个地方(在组件更新时)调用 toast.show() 时会出现相同的错误。
示例如下:
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();
为了解决这个问题,我做了以下事情:
export default
props:
toastHeader: String,
toastBody: String,
isHidden: Boolean
,
updated()
let toast = new Toast(document.getElementById("bootstrap-toast"));
if(!this.isHidden) toast.show();
可能在您的情况下,也有相同的情况。因此,toastRef.current 可能在触发 toast 显示/隐藏时包含无效的内容。尝试在 new Toast() 中使用 document.getElementById 来检查它是否与我的情况完全相同。我知道使用 document.getElementById 似乎很奇怪。至少它会让你知道问题出在哪里。
【讨论】:
以上是关于无法在引导程序 5 toast 中读取 null 的属性(读取“defaultPrevented”)的主要内容,如果未能解决你的问题,请参考以下文章
无法读取 null 的属性“addEventListener”(JavaScript Sails 应用程序)
嵌套网格中的 ExtJS 错误:无法读取 null 的属性“isGroupHeader”