TypeScript中的"EventTarget"上不存在属性"value" [英] Property 'value' does not exist on 'EventTarget' in TypeScript

问题描述

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

The following code in TypeScript with React is outputting the following error.

类型"EventTarget"上不存在属性值".

Property 'value' does not exist on type '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"，

• "@types/react": "^16.0.40",

反应":"^ 16.2.0"，

"react": "^16.2.0",

打字稿":"^ 2.7.2"，

"typescript": "^2.7.2",

这可以被视为 Typescript:React事件类型的后续行动它与 Nitzan Tomer 提供的工作代码不重复. .com/a/42085792/1902408>此答案目前在我的特定用例中不起作用.

This could be considered a follow-up to Typescript: React event types however it is not a duplicate as working code provided in by Nitzan Tomer in this answer is currently not working in my specific use case.

编辑如上所述，不是 Typescript:React事件类型的重复项，该问题中提供的解决方案在这种情况下不起作用，因此可能是另一种原因.

EDIT As mentioned above, NOT a duplicate of Typescript: React event types, the solution provided in that question is not working in this case, and therefore could be a different cause.

我的tsconfig.json文件如下:

My tsconfig.json file is as follows:

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

推荐答案

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

The problem is that you're using e.target.value instead of e.currentTarget.value.

您可以在定义文件中看到:

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

这篇关于TypeScript中的"EventTarget"上不存在属性"value"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！