脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React.Js添加与删除onScroll事件

React.Js添加与删除onScroll事件的方法详解

 更新时间：2017年11月03日 11:11:38   作者：xiaotuni  
这篇文章主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

React简介

React是有Facebook开发出来用于构建前端界面的JS组件库，由于其背后的强大背景，使得这款库在技术开发上完全没有问题。

React的优势

  • 解决大规模项目开发中数据不断变化变得难以操作的问题；
  • 组件化开发，使得开发更加快速；
  • 单向数据流，有利于找到问题；
  • 虚拟DOM，在React内部有一套diff算法可以快速的计算出整体需要改动的位置，从而做到快速局部刷新；举个栗子：删除一个列表再插入个新表，计算后会比较出不同然后插进去；

前言

大家都可能会遇到这样的问题，那就是滚动事件 。比较获取div的滚动事件，在ReactJS想要给div添加一个滚动事件，那基本上是添加不上的(可能是我的能力有限吧，反正我到目前为止，还没有找到可以直接给DIV添加滚动事件的）。

要想实现滚动，那就必须得componentWillMount里注册scroll事件， window.addEventListener(‘scroll', this.onScroll.bind(this)) ，添加事件非常容易的就添加上了。

在componentWillUnmount 里删除 window.removeEventListener(‘scroll', this.onScroll.bind(this))  。

添加容易，删除难，上面那种 remove是删除不了的。在其它页面里，如果你滚动也会触发 onScroll里的事件，此时就会报错，说组件已经卸载，不能进行操作，检查一下代码等等吧。

我想肯定有遇到了，也有解决的办法，果真找到了一篇文章移除 scroll 办法的。

代码如下：

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • React+Ts实现二次封装组件

    React+Ts实现二次封装组件

    本文主要介绍了React+Ts实现二次封装组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • React Native 如何获取不同屏幕的像素密度

    React Native 如何获取不同屏幕的像素密度

    这篇文章主要介绍了 React Native 如何 获取不同屏幕的像素密度的相关资料,需要的朋友可以参考下
    2017-01-01
  • React新文档切记不要滥用Ref

    React新文档切记不要滥用Ref

    这篇文章主要为大家介绍了React新文档滥用Ref出现的问题详解，以及如何正确的使用Ref，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2022-07-07
  • Suspense对React的意义及作用解析

    Suspense对React的意义及作用解析

    这篇文章主要为大家介绍了Suspense对React的意义及作用解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • React路由动画切换实现过程详解

    React路由动画切换实现过程详解

    这篇文章主要介绍了react-router 路由切换动画的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2022-12-12
  • React实现文件分片上传和下载的方法详解

    React实现文件分片上传和下载的方法详解

    在当今的前端开发中,处理文件流操作已经成为一个常见的需求,无论是上传、下载、读取、展示还是其他的文件处理操作,都需要高效且可靠地处理二进制数据,本文将深入探讨如何使用 React 实现文件分片上传和下载,并介绍相关的基本概念和技术,需要的朋友可以参考下
    2023-08-08
  • react开发教程之React 组件之间的通信方式

    react开发教程之React 组件之间的通信方式

    本篇文章主要介绍了react开发教程之React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • react native环境安装流程

    react native环境安装流程

    React Native 是目前流行的跨平台移动应用开发框架之一。本文介绍react native环境安装流程及遇到问题解决方法，感兴趣的朋友一起看看吧
    2021-05-05
  • React 保留和重置State

    React 保留和重置State

    这篇文章主要为大家介绍了React 保留和重置State实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • React component.forceUpdate()强制重新渲染方式

    React component.forceUpdate()强制重新渲染方式

    这篇文章主要介绍了React component.forceUpdate()强制重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论