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 said in their docs 它们具有值属性，就像每个 Mozilla 的 general button element 一样，当我 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)
}