Javascript 将警告非被动事件侦听器响应到滚动块'；touchstart'；

我有一个带有材质ui滑块的react组件。 每次渲染此组件时，我都会收到以下警告： 将非被动事件侦听器添加到滚动块“触摸启动”事件中。将事件处理程序标记为“被动”以使页面更加响应“

”。 如何解决这个问题

---

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

您可以查看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);

致：

---

谢谢你的回答。如何获取真实dom的ref并附加事件侦听器？我尝试在安装组件时添加document.addEventListener（'touchstart'，{passive:true}），但没有help@user12083483请参阅此文件：。您必须创建一个ref并将其分配给要分配给事件侦听器的dom（jsx标记）。感谢您的帮助。我尝试过：const slider=useRef（null）；useEffect（（）=>{slider.current.addEventListener（'touchstart'，handleTouchStart，{passive:true}}}}，[]），但它没有帮助…我做错了什么？在我看来，这个警告是form material ui Slider.js file-Slider.addEventListener（'touchstart'，handleTouchStart'）；（当我按下控制台中的警告按钮时，这就是我访问…）@user12083483请您创建一个在线示例，例如codesandbox，然后我可以通过检查您的代码为您提供帮助？控制台中的警告以详细形式显示。但当我在CodeSandbox中创建一个示例时，并没有任何警告。

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