PrimeReact TieredMenu - 未捕获的类型错误:无法在 TieredMenu.show 读取未定义的属性“currentTarget”(TieredMenu.js:84)

Posted

技术标签:

【中文标题】PrimeReact TieredMenu - 未捕获的类型错误:无法在 TieredMenu.show 读取未定义的属性“currentTarget”(TieredMenu.js:84)【英文标题】:PrimeReact TieredMenu - Uncaught TypeError: Cannot read property 'currentTarget' of undefined at TieredMenu.show (TieredMenu.js:84) 【发布时间】:2021-01-04 00:27:05 【问题描述】:

https://primefaces.org/primereact/showcase/#/tieredmenu

错误:-

 Uncaught TypeError: Cannot read property 'currentTarget' of undefined
        at TieredMenu.show (TieredMenu.js:84)
        at TieredMenu.toggle (TieredMenu.js:65)
    at dropdown._this.showDrp (dropdown.jsx:388)

TieredMenu.js:84 TieredMenu.js:65

  _createClass(TieredMenu, [
    key: "toggle",
    value: function toggle(event) 
      if (this.props.popup) 
        if (this.container.offsetParent) this.hide(event);else this.show(event);
      
    
  , 
    key: "show",
    value: function show(event) 
      var _this = this;

      if (this.props.autoZIndex) 
        this.container.style.zIndex = String(this.props.baseZIndex + _DomHandler.default.generateZIndex());
      

      this.container.style.display = 'block';
      setTimeout(function () 
        _DomHandler.default.addClass(_this.container, 'p-menu-overlay-visible');

        _DomHandler.default.removeClass(_this.container, 'p-menu-overlay-hidden');
      , 1);

      _DomHandler.default.absolutePosition(this.container, event.currentTarget);

      this.bindDocumentListeners();

      if (this.props.onShow) 
        this.props.onShow(event);
      
    
  , 

dropdown.jsx

menu = React.createRef();
   showDrp = () => 
        var refs = this.menu;
        if (refs && refs.current) refs.current.toggle();  // <-====
    

 < i className="p-icon kr-ellipsis" onClick=(e) => this.showDrp() aria-haspopup aria-controls="overlay_tmenu"></i>


 <div className="dropDownBoX">
                <TieredMenu model=obj popup ref=this.menu id="overlay_tmenu" />
            </div>

【问题讨论】:

【参考方案1】:

此错误表明您没有将事件对象传递给toggle 函数。您需要稍微修改您的代码,以便在单击按钮时触发的事件进入toggle 函数。

menu = React.createRef();
showDrp = (e) => 
  var refs = this.menu;
  if (refs && refs.current) refs.current.toggle(e); // <-====
;

<i
  className="p-icon kr-ellipsis"
  onClick=this.showDrp
  aria-haspopup
  aria-controls="overlay_tmenu"
></i>;


<div className="dropDownBoX">
  <TieredMenu model=obj popup ref=this.menu id="overlay_tmenu" />
</div>;

【讨论】:

以上是关于PrimeReact TieredMenu - 未捕获的类型错误:无法在 TieredMenu.show 读取未定义的属性“currentTarget”(TieredMenu.js:84)的主要内容,如果未能解决你的问题,请参考以下文章

PrimeFaces 与 PrimeReact?他们有啥共同点?

PrimeReact 和样式化组件

覆盖 PrimeReact 样式

在 PrimeReact 中覆盖 SCSS 变量

如何使用 PrimeReact FileUpload 组件上传文件

有没有办法在 PrimeReact 树中使用自定义图标?