在TypeScript中，'EventTarget'上不存在属性'value'。

Question

以下是TypeScript和React的代码，输出以下错误信息：

属性'value'在类型'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",

• "react": "^16.2.0",

• "typescript": "^2.7.2",

这可能被视为对Typescript: React event types的跟进，但它并不是重复的，因为Nitzan Tomer在此答案中提供的可工作代码在我的特定用例中当前无法正常工作。

编辑 如上所述，这不是Typescript: React事件类型的重复，该问题中提供的解决方案在这种情况下无法正常工作，因此可能是不同的原因。

我的tsconfig.json文件如下：

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

- tomhughes

Answer 1

问题在于你使用了e.target.value而不是e.currentTarget.value。

正如你在定义文件中所看到的：

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

- Nitzan Tomer

---

尽管使用了e.currentTarget，但update()方法仍然出现相同的错误。 - tomhughes

我正在使用 typescript@2.7.2 和 @types/react@16.0.40 进行编译，当我在我的答案中进行修复时，它可以正常编译。也许你的环境有一些奇怪的东西。创建一个新目录，然后从头开始安装东西，然后确保你从那里编译它：./node_modules/.bin/tsc ...，看看是否有变化。 - Nitzan Tomer

在一个全新的目录中，只有InputForm.tsx文件，使用与上述相同的版本号运行命令/node_modules/.bin/tsc InputForm.tsx --jsx react，出现了相同的问题。 - tomhughes

我不知道该告诉你什么。使用相同版本的ts和react types，您的代码在我的电脑上编译得很好。这一定是您环境中出了问题，但我不知道具体是什么。 - Nitzan Tomer

不确定我是否理解正确，但是当我打开类型定义（@Types/react/global.d.ts）时，EventTarget的接口是一个空对象。如果我将其修改为期望值为字符串的接口，则错误消失。我是否错误地导入了类型定义？ - tomhughes

EventTarget 不是你需要的，注意 currentTarget 属性的类型为 EventTarget & T。在你的情况下，T 是 HTMLFormElement，它具有 value 属性。 - Nitzan Tomer

Answer 2

稍微解释一下Nitzan Tomer的回答...

您以前可以使用这种方式中的e.target.value，其中目标将是通用的，在这种情况下为HTMLInputElement。该代码已经被还原，使e.currentTarget成为通用值，并使e.target不通用（硬编码为EventTarget）。EventTarget没有value属性。

原因在于currentTarget和target之间的差异。当您引用目标时，您引用触发事件的元素。如果您有一个带有某些图标的按钮，则如果直接单击该图标，则它将是目标。在编译时，您无法知道哪个元素类型将触发单击，但您可以知道事件侦听器注册的元素。因此，currentTarget是通用的。

此外，目标很少是您想要的。您通常希望事件侦听器附加到的元素。

Github评论提供了上述的理由。
Github PR中目标并非通用。

- cdosborn