Activar clic en Typescript: la propiedad ‘clic’ no existe en el tipo ‘Elemento’

2 minutos de lectura

avatar de usuario
floris

Me gustaría activar un evento de clic en un elemento HTML en Typescript/Reactjs.

let element: Element = document.getElementsByClassName('btn')[0];
element.click();

El código anterior funciona. Pero recibo un error de mecanografiado:

ERROR in [at-loader] ./src/App.tsx:124:17
TS2339: Property 'click' does not exist on type 'Element'.

Entonces, ¿cuál sería la forma correcta de hacer esto?

avatar de usuario
Suren Sarayan

Usa el tipo Elemento HTML en vez de Elemento. HTMLElement hereda de Element. Y en la documentación puedes encontrar que click La función se define en HTMLElement.

Transmita su elemento en HTMLElement a través de

let element: HTMLElement = document.getElementsByClassName('btn')[0] as HTMLElement;
element.click();

  • o incluso HTMLButtonElement si sabes que es un <button/>

    – J Killian

    13/09/2017 a las 17:59

  • No: ERROR en [at-loader] ./src/Game.tsx:123:13 TS2322: el tipo ‘Elemento’ no se puede asignar al tipo ‘HTMLElement’. Falta la propiedad ‘accessKey’ en el tipo ‘Elemento’.

    – Floris

    13/09/2017 a las 18:00

  • Usar operador de conversión document.getElementsByClassName('btn')[0] as HTMLElement

    – Suren Srayan

    13/09/2017 a las 18:02


  • gracias eso era! No sabía que podía emitir tipos como ese. Me da la sensación de Java :o)

    – Floris

    13 de septiembre de 2017 a las 18:07


  • mecanografiado es tal basura a veces

    – Daniel Rama

    13 de julio de 2020 a las 20:01

La forma correcta (escriba segura) es:

if (element instanceof HTMLElement) {
  element.click();
}

No debe usar lanzamientos forzados (como lo sugieren otras respuestas) a menos que De Verdad los necesito

document
  .querySelectorAll<HTMLElement>('.ant-table-row-expand-icon')
  .forEach(node => node.click())

  • Explícalo por favor!

    – Szabolcs Pall

    2 ago. 2019 a las 6:00

  • ¡La única forma en que funcionó!

    – Ahmad Habib

    19 de mayo a las 9:47

avatar de usuario
Mukesh

Usar así

(<HTMLElement>document.getElementsByClassName('btn')[0]).click()

Deberías usar ref para acceder al DOM.

<button  ref={button => this.buttonElement = button} />
In your event handler:

this.buttonElement.click();// trigger click event

O bien, cree HtmlEvents y adjúntelos al elemento dom.

var event = document.createEvent("HTMLEvents");
event.initEvent("click", true, true);
var button = document.getElementsByClassName('btn')[0];
button.dispatchEvent(event);

  • initEvent ya no es estándar.

    – Nikola Lukic

    25 de diciembre de 2017 a las 13:51

avatar de usuario
alferd nobel

tuvo un problema similar al crear secuencias de comandos con Puppeteer, lo siguiente ayudó a resolver el tipo: srcTracker:HTMLElement

page.$eval(this.selectorElement,(srcTracker:HTMLElement) => srcTracker.click());

  • initEvent ya no es estándar.

    – Nikola Lukic

    25 de diciembre de 2017 a las 13:51

¿Ha sido útil esta solución?