TypeScript 中的“EventTarget”上不存在属性“值”答案

【问题标题】：Property 'value' does not exist on 'EventTarget' in TypeScriptTypeScript 中的“EventTarget”上不存在属性“值”
【发布时间】：2018-08-15 13:46:00
【问题描述】：

带有 React 的 TypeScript 中的以下代码输出以下错误。

“EventTarget”类型上不存在属性“值”。

import React, { Component } from 'react';

class InputForm extends React.Component<any ,any> {
  state = {
    userInput: ''
  };

  handleUserInput = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({
      userInput: e.target.value
    });
  }

  // Working code from 42081549
  // Not relevant to this project
  update = (e: React.FormEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
  }

  submitMessage = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    this.props.sendUserMessage(this.state.userInput)
  }

  render() {
    return (
      <form className="chat-input-form" onSubmit={this.submitMessage}>
        <input value={this.state.userInput} onChange={this.handleUserInput}/>
        <button type="submit" />
      </form>
    );
  }

}

export default InputForm;

我目前正在使用：

"@types/react": "^16.0.40",
“反应”：“^16.2.0”，
“打字稿”：“^2.7.2”，

这可以被视为Typescript: React event types 的后续行动，但它不是重复的，因为Nitzan Tomer 在this answer 中提供的工作代码目前在我的特定用例中不起作用。

编辑如上所述，不是 Typescript: React event types 的副本，该问题中提供的解决方案在这种情况下不起作用，因此可能是不同的原因。

我的 tsconfig.json 文件如下：

{
  "compilerOptions": {
    "target": "es5",                          
    "module": "commonjs", 
    "lib": ["esnext", "dom"],
    "jsx": "react",                           
    "sourceMap": true,                        
    "outDir": "./dist/",                      
    "strict": true,                        
    "noImplicitAny": true,                   
    "esModuleInterop": true                 
  }
}

【问题讨论】：

标签： reactjs typescript events

【解决方案1】：

问题是您使用的是e.target.value 而不是e.currentTarget.value。

正如您在definition file 中看到的：

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
    target: EventTarget;
    ...
}

【讨论】：

尽管使用了 e.currentTarget，但 update() 方法仍然报错。
我正在用typescript@2.7.2 和@types/react@16.0.40 编译它，当我在我的答案中进行修复时它编译得很好。也许你的环境中有一些奇怪的东西。创建一个新目录，并从新安装那里的东西，然后确保从那里编译它：./node_modules/.bin/tsc ... 并查看是否有更改。
在以 InputForm.tsx 作为唯一文件的新目录中出现相同问题，运行具有与上述相同版本号的命令 /node_modules/.bin/tsc InputForm.tsx --jsx react。
我不知道该告诉你什么。你的代码对我来说编译得很好，ts 和 react 类型的版本相同。一定是你的环境中有些东西搞砸了，但我不知道是什么。
不确定我是否理解错了，但是当我打开类型定义 (@Types/react/global.d.ts) 时，EventTarget 的接口是一个空对象。如果我将其修改为一个接口，其中值预期为字符串，错误就会消失。我是否错误地导入了类型定义？

【解决方案2】：

详细说明 Nitzan Tomer 的回答...

您使用能够以这种方式使用e.target.value，目标是通用的，在这种情况下：HTMLInputElement。代码被还原为使e.currentTarget 通用并使e.target 不通用（硬编码到EventTarget）。 EventTarget 没有 value 属性。

原因在于currentTarget和target的区别。当您引用target 时，您指的是触发事件的元素。如果你有一个按钮，里面有一些图标。如果直接单击该图标，那么它将是目标。在编译时，你无法知道什么元素类型会触发点击，但你可以知道 eventListener 注册在哪个元素上。因此currentTarget 是通用的。

此外，target 很少是您想要的。您通常需要附加 eventListener 的元素。

Github comment 提供了上述理由。
Github PR 将目标设为 /not/ generic。

【讨论】：