React implements monitoring and pasting events and obtaining screenshots in the pasteboard

Listen to paste events and get screenshots from pasteboard

Add listening and pasting events to components in TSX

const pasteImageRef = useRef<HTMLDivElement>(null);
useEffect(()=>{
    //Add a listening and paste event to the component    ?.addEventListener('paste', pasteHandler);    
},[]);
<div
  tabIndex={-1} // Set tabIndex to focus  ref={pasteImageRef}
>
  <span>Ctrl+V Paste screenshot</span>
</div>

Get screenshot file from pasteboard

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 (('image')) {
      blob = (); // The blob is the screenshot file, which can be uploaded to the server after obtaining it    }
  }
};

React listening events

Event listening

Add event listening

('scroll', )

Remove event listening

('scroll', )

Bound event function related

Binding means that the event function must be the same. If it does not exist, it will cause unbinding to fail.

There are three types of event function types that are generally used: named functions, arrow functions, and anonymous functions

The focus here is on adding processing functions. The processing functions added by addEventListener() and removeEventListener() must be the same function. What is the same function? That is to say, these two functions are equal and point to the same address.

1. Anonymous functions

Adding and removing anonymous functions in event binding

('scroll', function(e){
    (e)
});
('scroll', function(e){
    (e)
});

From the above example writing method, it is obvious that when adding and removing events, two different addresses will be returned because of the anonymous function. These two events are different, so the event cannot be removed

2. Named functions

Adding and removing named functions in event binding

handleScroll(){
// Some code}
('scroll', 
    (this));
('scroll', 
    (this));

The above is a commonly used way to write named functions, but it is actually not correct to write this way. The function returned after adding bind does not point to the same function.

const test = {
    name:'test',
    getName:function(){
        ()
    }
}
let func1 = (test);
let func2 = (test);
let func3 = ;
let func4 = ;
(func1==func2)
(func3==func4)

If you still want to use named functions, you need to change the writing method. The solution is to declare it in advance in the constructor first.

constructor(){
    super();
     = (this)
}
handleScroll(){
// Some code}
('scroll', );
('scroll', );

3. Arrow function

You can directly use arrow functions to avoid the return of the same function.

Adding and removing arrow functions in event binding

handleScroll = () => {
// Some code}
('scroll', );
('scroll', );

Extended

(type, listener, options);
(type, listener, useCapture);

• target

There are two types of window and custom objects

('scroll', );
 obj = (classname)[0];
('scroll', );

• type

String that represents the type of listening event

Generally, mouse events (‘click’, ‘dblclick’) and keyboard events (‘keydown’, ‘keypress’) etc.

• listener

When the listened event type is triggered, an event notification (object that implements the Event interface) object is received. The listener must be an object that implements the EventListener interface, or a function.

• options(Optional)

An optional parameter object that specifies the listener attribute. The available options are as follows:

• capture: Boolean, indicating that listener will be fired when the event capture phase of this type propagates to the EventTarget.
• once: Boolean, means that the listener is only called once at most after being added. If true, listener will be automatically removed after it is called.
• passive: Boolean, when set to true, means that listener will never call preventDefault(). If listener still calls this function, the client will ignore it and throw a console warning.

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

• useCapture(Optional)

Boolean, in the DOM tree, registers the listener element, whether to call the listener before the EventTarget below it.

When useCapture(set to true), the event that bubbles upward along the DOM tree will not trigger the listener. When one element is nested with another element and both elements register a handler for the same event, the event bubble and event capture that occur are two different ways of event propagation.

addEventListener(type, listener, false)

The above is personal experience. I hope you can give you a reference and I hope you can support me more.