无法在引导程序 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”)的主要内容,如果未能解决你的问题,请参考以下文章

如何从Wix托管引导程序或自定义操作中读取某些注册表项?

错误:找不到要导入的文件或无法读取:引导电子邮件

无法读取 null 的属性“addEventListener”(JavaScript Sails 应用程序)

嵌套网格中的 ExtJS 错误:无法读取 null 的属性“isGroupHeader”

Ember cli mirage 错误:补丁处理程序无法读取 null 的属性更新

无法使用 Encore 在 Symfony 5.3 上正确安装和使用引导程序