Question

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

财产＆＃39;价值＆＃39;类型＆＃39; EventTarget＆＃39;。
上不存在

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;

我目前正在使用：

＆＃34; @ types / react＆＃34;：＆＃34; ^ 16.0.40＆＃34;，
＆＃34;反应＆＃34;：＆＃34; ^ 16.2.0＆＃34;，
＆＃34;打字稿＆＃34;：＆＃34; ^ 2.7.2＆＃34;，

这可以被视为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                 
  }
}

Answer 1

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

正如您在definition file中所看到的那样：

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

Answer 2

要详细介绍Nitzan Tomer的答案...

您使用可以在目标通用的情况下以这种方式使用e.target.value，在这种情况下为HTMLInputElement。还原了代码以使e.currentTarget通用，并使e.target非通用（硬编码为EventTarget）。 EventTarget没有值属性。

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

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

Github comment提供了上述理由。
Github PR的目标是/ not /通用的。

财产价值＆＃39; “事件目标”不存在＆＃39;在TypeScript中

2 个答案: