时间戳

首页 > 解决方案 > 类型“EventTarget & HTMLInputElement”.ts(2339) 上不存在属性“值”

reactjs - 类型“EventTarget & HTMLInputElement”.ts(2339) 上不存在属性“值”

问题描述

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

这是我的 handleChange 函数，第一次在 react 中编写 typescript。我想知道为什么我在 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"
  ]
}

再次感谢

标签： reactjstypescript

解决方案

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

根据您提供的信息，很难说出 TypeScript 为何会抱怨。我整理了一个 CodeSandbox 来证明我没有看到同样的错误。

CodeSandbox 演示

更新

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

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

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

第一次在反应中写打字稿

react-typescript-cheatsheet如果您还没有，我建议您检查一下。当您不熟悉在 React 中编写 TypeScript 时，这是一个很棒的参考。

推荐阅读