React如何實(shí)現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖

這篇文章主要介紹“React如何實(shí)現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“React如何實(shí)現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖”文章能幫助大家解決問題。

監(jiān)聽粘貼事件并獲取粘貼板中的截圖

TSX中給組件添加監(jiān)聽粘貼事件

const pasteImageRef = useRef<HTMLDivElement>(null);
useEffect(()=>{
    //給組件添加監(jiān)聽粘貼事件
    pasteImageRef.current?.addEventListener('paste', pasteHandler);    
},[]);
<div
  tabIndex={-1} // 設(shè)置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中就是截圖的文件，獲取后可以上傳到服務(wù)器
    }
  }
};

React監(jiān)聽事件

事件監(jiān)聽

添加事件監(jiān)聽

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

移除事件監(jiān)聽

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

綁定的事件函數(shù)相關(guān)

綁定是事件函數(shù)必須是同一個(gè)，如果不會(huì)同一個(gè)，會(huì)導(dǎo)致解綁失敗。

一般會(huì)用到的事件函數(shù)類型有三種：命名函數(shù)、箭頭函數(shù)、匿名函數(shù)

這里重點(diǎn)是添加處理的函數(shù)，addEventListener()和removeEventListener()添加的處理函數(shù)必須是同一個(gè)函數(shù)，什么叫同一個(gè)函數(shù)呢，就是說這兩個(gè)函數(shù)時(shí)相等的，指向同一個(gè)地址。

1. 匿名函數(shù)

匿名函數(shù)在事件綁定中的添加與移除

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

從上面的實(shí)例寫法來說，很明顯添加和移除事件時(shí)因?yàn)槭褂玫氖悄涿瘮?shù)，所以會(huì)返回兩個(gè)不同的地址，這兩個(gè)事件不同，所以無法移除事件

2. 命名函數(shù)

命名函數(shù)在事件綁定中的添加與移除

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

以上是常用的使用命名函數(shù)的寫法，但其實(shí)這樣寫還是不對(duì)的，每次加上bind之后返回的函數(shù)并不是指向同一個(gè)函數(shù)

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)

如果還想要用命名函數(shù)，那么就要換種寫法，解決方法是先在constructor中提前聲明好

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

3. 箭頭函數(shù)

可以直接使用箭頭函數(shù)來避免返回的不是同一個(gè)函數(shù)這種情況

箭頭函數(shù)在事件綁定中的添加與移除

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

擴(kuò)展

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

• target

可以有兩種，window和自定義對(duì)象

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

• type

表示監(jiān)聽事件類型的字符串

一般常用的是鼠標(biāo)事件(‘click’, ‘dblclick’)和鍵盤事件(‘keydown’, ‘keypress’)等

• listener

當(dāng)所監(jiān)聽的事件類型觸發(fā)時(shí)，會(huì)接收到一個(gè)事件通知（實(shí)現(xiàn)了 Event 接口的對(duì)象）對(duì)象。listener 必須是一個(gè)實(shí)現(xiàn)了 EventListener 接口的對(duì)象，或者是一個(gè)函數(shù)。

• options(可選)

一個(gè)指定有關(guān) listener 屬性的可選參數(shù)對(duì)象?？捎玫倪x項(xiàng)如下：

• capture: Boolean，表示 listener 會(huì)在該類型的事件捕獲階段傳播到該 EventTarget 時(shí)觸發(fā)。

• once: Boolean，表示 listener 在添加之后最多只調(diào)用一次。如果是 true， listener 會(huì)在其被調(diào)用之后自動(dòng)移除。

• passive: Boolean，設(shè)置為true時(shí)，表示 listener 永遠(yuǎn)不會(huì)調(diào)用preventDefault()。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告。

addEventListener(type, listener, {
    capture: false,
    once: false,
    passive: false
})

• useCapture(可選)

Boolean，在DOM樹中，注冊了listener的元素， 是否要先于它下面的EventTarget，調(diào)用該listener。

當(dāng)useCapture(設(shè)為true) 時(shí)，沿著DOM樹向上冒泡的事件，不會(huì)觸發(fā)listener。當(dāng)一個(gè)元素嵌套了另一個(gè)元素，并且兩個(gè)元素都對(duì)同一事件注冊了一個(gè)處理函數(shù)時(shí)，所發(fā)生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。

addEventListener(type, listener, false)

關(guān)于“React如何實(shí)現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。