属性'value'在类型'EventTarget & HTMLInputElement'.ts(2339)上不存在

Question

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { value } = e.target;
setUserName(value)
}

这是我的句柄更改函数，第一次在 react 中编写打字稿。 我想知道为什么我在 vs 代码中得到以下内容：

Property 'value' does not exist on type 'EventTarget & HTMLInputElement'.ts(2339)

一切正常，但这不会消失。

编辑：首先，感谢您分享该备忘单！肯定是一个很大的帮助！

以下是完整的文件：

import React, { useState } from "react";
const App: React.FC = () => {
const [userName, setUserName] = useState("");
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { value } = e.target;
setUserName(value);
};
return (
<div>
<form>
<input
type="text"
placeholder="username"
value={userName}
onChange={handleChange}
/>
</form>
</div>
);
};
export default App;

我试图删除句柄更改并直接在 onChange 道具中退出函数，但问题仍然存在。

可能是我的tsconfig.json有问题吗？ 我只是使用 CRA 的默认配置

{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

再次感谢

Answer 1

React 和 TypeScript 社区的朋友在这里...

根据您提供的信息，很难说出TypeScript可能会抱怨的原因。我已经整理了一个CodeSandbox来证明我没有看到相同的错误。

代码沙盒演示

更新

感谢您添加文件以获取更多上下文。一切看起来都很好，包括你的tsconfig.json.您是否安装了 React 的@types包，即

"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",

这是唯一想到的另一件事。如果这不能解决它，您能否包含指向存储库或 CodeSandbox 的链接并重现错误？然后我可以仔细看看。

第一次在 React 中编写打字稿

如果您还没有，我建议您查看react-typescript-cheatsheet。当你刚开始在 React 中编写 TypeScript 时，这是一个很好的参考。