EventTarget 類型上不存在屬性“值”(ts2339)

Question

我越來越曲折：

你可以看到我輸入正確（我認為）。

  const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.target.value)
  }

這是有問題的元素。

      {props.question.responses.map((r: string, i: number) => {
        return <button key={i} value={r} className={`${CSS.columnBtn} ${CSS.gray}`} onClick={(e) => hClick(e)}>{r}</button>;
      })}

您可以清楚地看到它具有價值。 我也做了我的研究。 按鈕不僅本身具有值，而且 MS 在他們的文檔中說它們有一個值道具，每個 Mozilla 的一般按鈕元素也是如此，當我 ctrl + 單擊進入 HTMLButtonElement 的 d.ts 文件時，它顯示一個值道具，它是一個字符串：

    /**
     * Sets or retrieves the default or selected value of the control.
     */
    value: string;

此外，代碼可以正常工作並記錄值。 我是 TypeScript 的新手，所以可能有些東西我不知道，而這正是我想學習的。

順便說一句，如果一個屬性在給定元素中不存在，但你給它一個自定義的，它顯然不會在 d.ts 中，那么你如何告訴編譯器你的 html 屬性 foo[="bar"] 存在在活動上？

Answer 1

由於target可以是任何其他潛在元素（甚至是非元素），您可以使用類型斷言將其變為HTMLButtonElement 。

const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    let button = e.target as HTMLButtonElement;
    console.log(button.value)
}

我查看了 React Typings 並且HTMLButtonElement最終會出現在currentTarget中（這是有道理的，因為這是偵聽器所附加的元素，它是一個按鈕）。

所以你可以使用：

const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.currentTarget.value)
}

Answer 2

<input (keyup)="myeventreal($any($event).target.value)" />

在 angluar 13 版本中使用它