Question

我有一个带有Material-ui滑块的react组件。每次渲染此组件时，我都会收到以下警告： “在滚动阻止的'touchstart'事件中添加了非被动事件侦听器。考虑将事件处理程序标记为'被动'以使页面更具响应性”

如何解决？

a solution

Answer 1

被动不支持被动事件监听器。您要做的是获取真实dom的引用，并使用{passive：true}作为选项附加事件侦听器。并且不要忘记在破坏组件之前拆下事件监听器（实际上在componentWillUnmount中）。

Answer 2

您可以查看 github fork 以获取有关如何修复的详细信息（问题 #20），以下是它的作用：

修改 sidenav.js 的第 132、134 和 136 行。

更改自：

this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound);
this._overlay.addEventListener('touchmove', this._handleCloseDragBound);
this.el.addEventListener('touchmove', this._handleCloseDragBound);

到：

this.dragTarget.addEventListener('touchmove', this._handleDragTargetDragBound, { passive: true});
this._overlay.addEventListener('touchmove', this._handleCloseDragBound, { passive: true});
this.el.addEventListener('touchmove', this._handleCloseDragBound, { passive: true});

对滚动阻止的'touchstart'反应警告非被动事件侦听器

2 个答案: