Question

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

这是我的handleChange函数，第一次在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来证明我没有看到相同的错误。

CodeSandbox demo

已更新

感谢您添加文件以获取更多上下文。一切看起来不错，包括您的tsconfig.json。您是否安装了@types个React软件包？

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

这是我想到的唯一另一件事。如果那不能解决问题，您是否可以提供一个指向仓库或CodeSandbox的链接并复制错误？然后我可以仔细看看。

第一次在React中编写打字稿

我建议您检出react-typescript-cheatsheet（如果尚未使用）。当您不熟悉在React中编写TypeScript时，这是一个很棒的参考。

属性“值”在类型“ EventTarget和HTMLInputElement”上不存在。ts（2339）

1 个答案: