当我们试图访问一个类型为HTMLElement的元素上的value属性时，会产生"Property 'value' does not exist on type 'HTMLElement'"错误。为了解决该错误，在访问属性之前，使用类型断言将元素类型断言为HTMLInputElement。
这里有个示例用来展示错误是如何发生的。
// App.tsx
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
const input = document.getElementById('message');
// ⛔️ Property 'value' does not exist on type 'HTMLElement'.ts(2339)
console.log(input?.value);
}, []);
return (
<div>
<input id="message" defaultValue="Initial value" />
</div>
);
}
我们得到错误的原因是因为，document.getElementById方法返回的类型为HTMLElement | null ，并且value属性不存在于HTMLElement类型上。
为了解决该错误，使用类型断言将元素类型断言为HTMLInputElement（或者HTMLTextAreaElement，如果你使用textarea元素键入）。
import {useEffect} from 'react';
export default function App() {
useEffect(() => {
// ✅ type element as HTMLInputElement
const input = document.getElementById('message') as HTMLInputElement;
console.log(input?.value); // 相关文章
- 解决React报错React Hook useEffect has a missi
- 解决React报错Cannot find namespace context
- React使用公共文件夹public问题
- React点击事件的两种写法小结
- 解决React报错Parameter 'props' implicitly has an '
- React控制元素显示隐藏的三种方法小结
- 解决React报错Rendered more hooks than during the p
- React修改数组对象的注意事项及说明
- react如何修改循环数组对象的数据
- 解决React报错Property does not exist on type 'JSX.
- 解决React报错Property 'value' does not exist on type EventTarget
