React实现监听粘贴事件并获取粘贴板中的截图

目录
  • 监听粘贴事件并获取粘贴板中的截图
    • TSX中给组件添加监听粘贴事件
    • 从粘贴板获取截图文件
  • React监听事件
    • 事件监听
    • 绑定的事件函数相关
    • 扩展

监听粘贴事件并获取粘贴板中的截图

TSX中给组件添加监听粘贴事件

const pasteImageRef = useRef<HTMLDivElement>(null);
useEffect(()=>{
    //给组件添加监听粘贴事件
    pasteImageRef.current?.addEventListener('paste', pasteHandler);    
},[]);
<div
  tabIndex={-1} // 设置tabIndex才可以聚焦
  ref={pasteImageRef}
>
  <span>Ctrl+V 粘贴截图</span>
</div>

从粘贴板获取截图文件

const pasteHandler = (e: ClipboardEvent) => {
  const { clipboardData } = e;
  const { items } = clipboardData;
  const { length } = items;
  let blob = null;
  for (let i = 0; i < length; i++) {
    const item = items[i];
    if (item.type.startsWith('image')) {
      blob = item.getAsFile(); // blob中就是截图的文件,获取后可以上传到服务器
    }
  }
};

React监听事件

事件监听

添加事件监听

window.addEventListener('scroll', this.handleListen)

移除事件监听

window.removeEventListener('scroll', this.handleListen)

绑定的事件函数相关

绑定是事件函数必须是同一个,如果不会同一个,会导致解绑失败。

一般会用到的事件函数类型有三种:命名函数、箭头函数、匿名函数

这里重点是添加处理的函数,addEventListener()和removeEventListener()添加的处理函数必须是同一个函数,什么叫同一个函数呢,就是说这两个函数时相等的,指向同一个地址。

1. 匿名函数

匿名函数在事件绑定中的添加与移除

window.addEventListener('scroll', function(e){
    console.log(e)
});
window.removeEventListener('scroll', function(e){
    console.log(e)
});

从上面的实例写法来说,很明显添加和移除事件时因为使用的是匿名函数,所以会返回两个不同的地址,这两个事件不同,所以无法移除事件

2. 命名函数

命名函数在事件绑定中的添加与移除

handleScroll(){
// 一些代码
}
window.addEventListener('scroll', 
    this.handleScroll.bind(this));
window.removeEventListener('scroll', 
    this.handleScroll.bind(this));

以上是常用的使用命名函数的写法,但其实这样写还是不对的,每次加上bind之后返回的函数并不是指向同一个函数

const test = {
    name:'test',
    getName:function(){
        console.log(this.name)
    }
}
let func1 = test.getName.bind(test);
let func2 = test.getName.bind(test);
let func3 = test.getName;
let func4 = test.getName;
console.log(func1==func2)
console.log(func3==func4)

如果还想要用命名函数,那么就要换种写法,解决方法是先在constructor中提前声明好

constructor(){
    super();
    this.handleScroll = this.handleScroll.bind(this)
}
handleScroll(){
// 一些代码
}
window.addEventListener('scroll', this.handleScroll);
window.removeEventListener('scroll', this.handleScroll);

3. 箭头函数

可以直接使用箭头函数来避免返回的不是同一个函数这种情况

箭头函数在事件绑定中的添加与移除

handleScroll = () => {
// 一些代码
}
window.addEventListener('scroll', this.handleScroll);
window.removeEventListener('scroll', this.handleScroll);

扩展

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
  • target

可以有两种,window和自定义对象

1.window.addEventListener('scroll', this.handleScroll);
2.const obj = document.getElementsByClassName(classname)[0];
obj.addEventListener('scroll', this.handleScroll);
  • type

表示监听事件类型的字符串

一般常用的是鼠标事件(‘click’, ‘dblclick’)和键盘事件(‘keydown’, ‘keypress’)等

  • listener

当所监听的事件类型触发时,会接收到一个事件通知(实现了 Event 接口的对象)对象。listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数。

  • options(可选)

一个指定有关 listener 属性的可选参数对象。可用的选项如下:

  • capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
  • once: Boolean,表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
  • passive: Boolean,设置为true时,表示 listener 永远不会调用preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。
addEventListener(type, listener, {
    capture: false,
    once: false,
    passive: false
})
  • useCapture(可选)

Boolean,在DOM树中,注册了listener的元素, 是否要先于它下面的EventTarget,调用该listener。

当useCapture(设为true) 时,沿着DOM树向上冒泡的事件,不会触发listener。当一个元素嵌套了另一个元素,并且两个元素都对同一事件注册了一个处理函数时,所发生的事件冒泡和事件捕获是两种不同的事件传播方式。

addEventListener(type, listener, false)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • React复制到剪贴板的示例代码

    本文介绍了React复制到剪贴板可以使用插件copy-to-clipboard,分享给大家,具体如下: 参考API文档 安装 npm install --save react react-copy-to-clipboard 使用 const App = React.createClass({ getInitialState() { return {value: '', copied: false}; }, onChange({target: {value}}) { this.setState({

  • React-router4路由监听的实现

    React-router 4 React Router4是一个纯React重写的包,现在的版本中已不需要路由配置,一切皆组件. 问题出发点 最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2"),项目中的一部分页面是需要给app客户端的同学使用,这样H5项目中的title就不能一成不变,需要显示对应页面的title,所以,我们就需要去监听路由变动来更改title. 思路 在react中,例如:在父路由

  • React-Native之截图组件react-native-view-shot的介绍与使用小结

    目录 一.现象 二.解决 三.总结: 一.现象 1.需求:把某展示页面进行截取保存到相册.并可进行以海报的形式分享出去: 2.支持iOS和安卓 二.解决 1.安装: npm i --save react-native-view-shot 2.进行链接处理:react-native link react-native-view-shot 3.当为IOS时执行还需要执行一下命令(安卓不用):cd ios && pod install && cd .. 4.使用: (1).引用:

  • React实现监听粘贴事件并获取粘贴板中的截图

    目录 监听粘贴事件并获取粘贴板中的截图 TSX中给组件添加监听粘贴事件 从粘贴板获取截图文件 React监听事件 事件监听 绑定的事件函数相关 扩展 监听粘贴事件并获取粘贴板中的截图 TSX中给组件添加监听粘贴事件 const pasteImageRef = useRef<HTMLDivElement>(null); useEffect(()=>{     //给组件添加监听粘贴事件     pasteImageRef.current?.addEventListener('paste',

  • Vue.js实战之通过监听滚动事件实现动态锚点

    前言 前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用

  • 两种js监听滚轮事件的实现方法

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • Android ListView监听滑动事件的方法(详解)

    ListView的主要有两种滑动事件监听方法,OnTouchListener和OnScrollListener 1.OnTouchListener OnTouchListener方法来自View中的监听事件,可以在监听三个Action事件发生时通过MotionEvent的getX()方法或getY()方法获取到当前触摸的坐标值,来对用户的滑动方向进行判断,并可在不同的Action状态中做出相应的处理 mListView.setOnTouchListener(new View.OnTouchLis

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue回到顶部监听滚动事件详解

    本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div class="tools"> <ul @mouseleave="mouseLeave()"> <li @click="toTop(step)">回到顶部</li> <li @mouseover="mouseOver(1)"&

  • 前端项目中的Vue、React错误监听

    目录 一. Vue 错误监听 window.onerror errorCaptured 生命周期 errorHandler 异步错误 答案 扩展 二.React 错误监听 ErrorBoundary dev 和 build 事件报错 异步错误 答案 扩展 一. Vue 错误监听 题目: 如何统一监听 Vue 组件报错? 分析: 真实项目需要闭环,即考虑各个方面,除了基本的功能外,还要考虑性能优化.报错.统计等. 而个人项目.课程项目一般以实现功能为主,不会考虑这么全面.所以,没有实际工作经验的同

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

随机推荐