유형 스크립트의 트리거 클릭 - 유형 'Element'에 속성 'click'이 없습니다.

유형 스크립트의 트리거 클릭 - 유형 'Element'에 속성 'click'이 없습니다.

Typescript/Reactjs의 HTML 요소에서 클릭 이벤트를 트리거하고 싶습니다.

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

위의 코드는 동작한다.하지만 Typescript 오류가 나타납니다.

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

그러면 올바른 방법은 무엇일까요?

Element 대신 HTMlement 유형을 사용합니다.HTMlement는 Element에서 상속됩니다.이 매뉴얼에는 다음과 같은 내용이 기재되어 있습니다.click함수는 HTLelement에 정의되어 있습니다.

요소를 HTLelement에 캐스팅하려면

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

올바른(타입 세이프) 방법은 다음과 같습니다.

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

꼭 필요한 경우가 아니면 (다른 답변에서 제안하는) 강제 캐스팅을 사용하면 안 됩니다.

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

이렇게 사용

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

를 사용해 주세요.ref액세스 할 수 있습니다.

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

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

또는 HtmlEvents를 생성하여 dom 요소에 연결합니다.

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

Puppeteer를 사용하여 스크립팅하는 동안 유사한 문제가 발생했습니다.다음은 유형을 해결하는 데 도움이 됩니다.srcTracker:HTMLElement

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

여기서도 언급했듯이

var buttons = document.getElementsByClassName(
  "btn"
) as HTMLCollectionOf<HTMLElement>;

언급URL : https://stackoverflow.com/questions/46204003/trigger-click-in-typescript-property-click-does-not-exist-on-type-element