Búsqueda de sitios web

reactjs - Eliminar manejador de eventos usando señal de aborto con Typescript y React

Estoy construyendo un portal que en última instancia obtiene documentos similares a XML y los muestra en el navegador, y cada vez que cargo una de estas páginas, necesito adjuntar controladores onclick y mouseover a varios elementos de la página.

Sin embargo, el usuario puede navegar entre varias de estas páginas y estoy teniendo problemas con múltiples manejadores asignados a un solo elemento.

Entonces, me gustaría adjuntar un manejador que contenga una señal de aborto, de modo que cada vez que cambio de página pueda implicar el aborto y eliminar todos los manejadores de una vez, pero no parece que pueda hacer que TypeScript coopere.

Un ejemplo del código:

    export const attachElementModifiers = (
      elementObject: { [key: string]: Element },
      elementPointerClass: string,
      listener: (evt: any) => void,
      onHoveringHandler: (_evt: any, key: string) => void,
      onMouseOutHandler: (_evt: any) => void,
      controller: AbortController
    ): void => {
      for (const [key] of Object.entries(elementObject)) {
        elementObject[key].classList.add(elementPointerClass)
        elementObject[key].addEventListener('click', listener)
        elementObject[key].addEventListener('mouseover', (_evt: any) =>
          onHoveringHandler(_evt, key)
        )
        elementObject[key].addEventListener(
          'mouseleave',
          (_evt: any) => onMouseOutHandler(_evt),
          { signal: controller.signal }  // <---- ERROR HERE
        )
      }
    }

El siguiente error siempre aparece:

No overload matches this call.
  Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '"mouseleave"' is not assignable to parameter of type 'keyof ElementEventMap'.
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '{ signal: AbortSignal; }' is not assignable to parameter of type 'boolean | AddEventListenerOptions | undefined'.
      Object literal may only specify known properties, and 'signal' does not exist in type 'AddEventListenerOptions'.ts(2769)

Sé que AbortSignal existe en lib.dom.d.ts, sin embargo, no estoy seguro de cómo usarlo correctamente aquí.

Respuesta #1

Puedes arreglar esto

elementObject[key].addEventListener(
  'mouseleave',
  (_evt: any) => onMouseOutHandler(_evt),
  { signal: controller.signal }   as AddEventListenerOptions
)

El objeto de opciones está causando ese error, incluso cuando tiene propiedades que coinciden con la interfaz AddEventListenerOptions, todavía necesita que se le indique que es un AddEventListenerOptions.

Artículos relacionados