Menu
I have a keydown handler function defined like so:
handleOnKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (key.isEscape(e.key)) {
stopEvent(e);
this.props.handleClose(e);
}
}
However in another part of my code where this function is passed to removeEventListener and addEventListener:
componentDidMount () {
const { current: modal } = this.modalRef;
if (modal) {
modal.addEventListener('keydown', this.handleOnKeyDown);
}
}
componentWillUnmount () {
const { current: modal } = this.modalRef;
if (modal) {
modal.removeEventListener('keydown', this.handleOnKeyDown);
}
}
I get the following Typescript error:
No overload matches this call.
Overload 1 of 2, '(type: "keydown", listener: (this: HTMLDivElement, ev: KeyboardEvent) => any, options?: boolean | EventListenerOptions | undefined): void', gave the following error.
Argument of type '(e: React.KeyboardEvent<HTMLButtonElement>) => void' is not assignable to parameter of type '(this: HTMLDivElement, ev: KeyboardEvent) => any'.
Types of parameters 'e' and 'ev' are incompatible.
Type 'KeyboardEvent' is missing the following properties from type 'KeyboardEvent<HTMLButtonElement>': locale, nativeEvent, isDefaultPrevented, isPropagationStopped, persist
Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void', gave the following error.
Argument of type '(e: React.KeyboardEvent<HTMLButtonElement>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
Type '(e: React.KeyboardEvent<HTMLButtonElement>) => void' is not assignable to type 'EventListener'.
Types of parameters 'e' and 'evt' are incompatible.
Type 'Event' is missing the following properties from type 'KeyboardEvent<HTMLButtonElement>': altKey, charCode, ctrlKey, getModifierState, and 12 more.ts(2769)
What would be work around for this?
958
Using the once option We can pass an object as an argument to the addEventListener method and specify that the event is only handled once. This is achieved by passing the property once to the object. If we set once to true, the event will only be fired once.
addEventListener("click", first, true); when clicking child element, first method will be called before second . By default, the useCapture flag is set to false which means you handler will only be called during event bubbling phase.
addEventListener("click", displayDate); Try it Yourself » The addEventListener() method attaches an event handler to the specified element. The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element.
Definition and Usage The removeEventListener () method removes an event handler that has been attached with the addEventListener () method. Note: To remove event handlers, the function specified with the addEventListener () method must be an external function, like in the example above (myFunction).
Given an event listener previously added by calling addEventListener (), you may eventually come to a point at which you need to remove it. Obviously, you need to specify the same type and listener parameters to removeEventListener (). But what about the options or useCapture parameters?
listener: It is the function of the event handler to remove. useCapture: It is an optional parameter. By default it is Boolean value false which specifies the removal of event handler from the bubbling phase and if it is true than the removeEventListener () method removes the event handler from the capturing phase. "mouseover Event !!" + "<br>";
Remove a "mousemove" event that has been attached with the addEventListener () method: The removeEventListener () method removes an event handler that has been attached with the addEventListener () method.
The issue appears to be answered this question: react typescript issue on addEvenListener
The handler function for addEventListener and removeEventListener does not accept a React.KeyboardEvent as a parameter. It needs a DOM event.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
