无法获取 HTMLElement 的值

Question

我目前正在使用带有 .tsx 文件的 Ionic React。当我做一个简单的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)