觸發點擊 Typescript - 類型“元素”上不存在屬性“點擊”

Question

我想在 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'.

那么這樣做的正確方法是什么？

Answer 1

使用類型HTMLElement而不是Element 。 HTMLElement 繼承自 Element。 在文檔中你可以發現click函數是在 HTMLElement 中定義的。

通過以下方式將您的元素投射到 HTMLElement 中

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

Answer 2

正確（類型安全）方式是：

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

除非您真的需要它們，否則您不應該使用強制轉換（如其他答案所建議的那樣）。

Answer 3

您應該使用ref來訪問 DOM。

<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);

Answer 4

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

Answer 5

像這樣使用

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

Answer 6

使用 Puppeteer 編寫腳本時遇到類似問題，以下內容有助於解決該類型： srcTracker:HTMLElement

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

Answer 7

正如這里提到的，也

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