响应警告非被动事件侦听器到滚动阻止触发器

Question

我有一个反应组件与材料ui滑块。每次这个组件呈现时，我都会收到这个警告：“将非被动事件侦听器添加到阻止滚动的‘触摸启动’事件中。考虑将事件处理程序标记为“被动”，以使页面更具响应性”

如何解决这个问题？

Answer 1

您可以查看github fork以了解有关如何修复的详细信息（问题#20），下面是它的功能：

修改第132、134行

改自：

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});

Answer 2

React不支持被动事件侦听器。您需要做的是获取真实dom的ref，并使用{passive:true}作为选项附加事件侦听器。在销毁组件之前不要忘记分离事件侦听器（在componentWillUnmount中）。