无法获取 HTML 的价值

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)