React實現(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ù)必須是同一個，如果不會同一個，會導(dǎo)致解綁失敗。
一般會用到的事件函數(shù)類型有三種：命名函數(shù)、箭頭函數(shù)、匿名函數(shù)
這里重點是添加處理的函數(shù)，addEventListener()和removeEventListener()添加的處理函數(shù)必須是同一個函數(shù)，什么叫同一個函數(shù)呢，就是說這兩個函數(shù)時相等的，指向同一個地址。
1. 匿名函數(shù)
匿名函數(shù)在事件綁定中的添加與移除
window.addEventListener('scroll', function(e){
? ? console.log(e)
});
window.removeEventListener('scroll', function(e){
? ? console.log(e)
});從上面的實例寫法來說，很明顯添加和移除事件時因為使用的是匿名函數(shù)，所以會返回兩個不同的地址，這兩個事件不同，所以無法移除事件
2. 命名函數(shù)
命名函數(shù)在事件綁定中的添加與移除
handleScroll(){
// 一些代碼
}
window.addEventListener('scroll',?
?? ?this.handleScroll.bind(this));
window.removeEventListener('scroll',?
?? ?this.handleScroll.bind(this));以上是常用的使用命名函數(shù)的寫法，但其實這樣寫還是不對的，每次加上bind之后返回的函數(shù)并不是指向同一個函數(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ù)來避免返回的不是同一個函數(shù)這種情況
箭頭函數(shù)在事件綁定中的添加與移除
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
表示監(jiān)聽事件類型的字符串
一般常用的是鼠標事件(‘click’, ‘dblclick’)和鍵盤事件(‘keydown’, ‘keypress’)等
listener
當所監(jiān)聽的事件類型觸發(fā)時，會接收到一個事件通知（實現(xiàn)了 Event 接口的對象）對象。listener 必須是一個實現(xiàn)了 EventListener 接口的對象，或者是一個函數(shù)。
options(可選)
一個指定有關(guān) listener 屬性的可選參數(shù)對象?？捎玫倪x項如下：
capture: Boolean，表示 listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發(fā)。once: Boolean，表示 listener 在添加之后最多只調(diào)用一次。如果是 true， listener 會在其被調(diào)用之后自動移除。passive: Boolean，設(shè)置為true時，表示 listener 永遠不會調(diào)用preventDefault()。如果 listener 仍然調(diào)用了這個函數(shù)，客戶端將會忽略它并拋出一個控制臺警告。
addEventListener(type, listener, {
? ? capture: false,
? ? once: false,
? ? passive: false
})useCapture(可選)
Boolean，在DOM樹中，注冊了listener的元素， 是否要先于它下面的EventTarget，調(diào)用該listener。
當useCapture(設(shè)為true) 時，沿著DOM樹向上冒泡的事件，不會觸發(fā)listener。當一個元素嵌套了另一個元素，并且兩個元素都對同一事件注冊了一個處理函數(shù)時，所發(fā)生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。
addEventListener(type, listener, false)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于React.Js添加與刪除onScroll事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧。2017-11-11
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
react-intl實現(xiàn)React國際化多語言的方法
這篇文章主要介紹了react-intl實現(xiàn)React國際化多語言的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-09-09
React函數(shù)組件與類組件使用及優(yōu)劣對比
本文主要介紹了React函數(shù)組件與類組件使用及優(yōu)劣對比，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
使用React18和WebSocket構(gòu)建實時通信功能詳解
WebSocket是一種在Web應(yīng)用中實現(xiàn)雙向通信的協(xié)議,它允許服務(wù)器主動向客戶端推送數(shù)據(jù),而不需要客戶端發(fā)起請求,本文將探索如何在React?18應(yīng)用中使用WebSocket來實現(xiàn)實時通信,感興趣的可以了解下2024-01-01
react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決
這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了Redux中異步action與同步action的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-07-07
React循環(huán)遍歷渲染數(shù)組和對象元素方式
這篇文章主要介紹了React循環(huán)遍歷渲染數(shù)組和對象元素方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了react+antd.3x實現(xiàn)ip輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10