无法获取 HTMLElement 的值

Question

我目前正在使用 Ionic React 处理 .tsx 文件。当我做一个简单的 document.getElementById("input-id").value 时，得到了错误 Property 'value' does not exist on type 'HTMLElement'。寻找解决此问题的方法，找到打字稿解析器 <HTMLInputElement>，但不起作用，因为 HTMLElement 没有很多 HTMLInputElement 属性。

在此上下文中如何获取输入的值？

我的代码在这里。由于 Typescript 错误，它甚至无法编译：

handleChange() {
  const input = document.getElementById("id").value;
}

render() {
  return (
    <IonPage>
      <IonContent fullscreen>
        <TextField
          id="id"
          label="Input"
          variant="outlined"
          required
        />
      </IonContent>
    </IonPage>
  );
}

Answer 1

您可以使用带有 as 关键字的转换并声明一个您知道属于 HTMLInputElement 类型的变量。然后访问它的 value 属性.

const inputElement: HTMLInputElement = document.getElementById("input-id") as HTMLInputElement;
console.log(inputElement.value)

无法获取 HTMLElement 的值

Can't get value of HTMLElement

reactjs

typescript

ionic5

tsx