typescript 对 setState 与用户输入进行反应

在这个打字稿反应（create-react-app）的基本示例中，我试图通过用户输入更改state.name。

有人可以向我展示一个工作示例（我没有找到）或更好的示例：文档在哪里？

linter 的（第二个）错误是：

(54,24): 错误 TS2322: 类型 '{ onChange: (e: Event) => void; }' 不是 可分配给类型 '详细的HTML属性， HTMLInputElement>'.输入 '{ onChange: (e: Event) => void; }' 不是 可分配给类型“InputHTMLAttributes”。 属性“onChange”的类型不兼容。 类型“(e: Event) => void”不可分配给类型“EventHandler> |”不明确的'。 类型“(e: Event) => void”不可分配给类型“EventHandler>”。 参数“e”和“event”的类型不兼容。 类型“ChangeEvent”不可分配给类型“Event”。 “ChangeEvent”类型中缺少属性“cancelBubble”。

import * as React from 'react';
import './Hello.css';

interface Props {
    name: string;
}

interface State {
    name: string;
}

class Hello extends React.Component<Props, State> {

public static defaultProps = {
    name: 'John',
};

constructor(props: Props) {
    super(props);
    this.state = {
        name: props.name,
    };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(e: Event): void {
    this.setState({
        name: e.target.value //Error : property 'value' does not exist on type 'EventTarget'
    });
}

render(): JSX.Element {
    return (
        <div className="hello">
            Hello {this.state.name}
            <input onChange={(e: Event) => this.handleChange(e)} /> //error is at this line
        </div>
      );
   }
}

export default Hello;

改变你的

handleChange(e: Event)

with

handleChange (e: React.FormEvent<HTMLInputElement>)

and

e.target.name;

with

e.currentTarget.name;

另外，您可能想要更改

 <input onChange={(e: Event) => this.handleChange(e)} />

with

 <input onChange={this.handleChange} />