typescript使用户输入反应setState

Question

在这个基本的typescript react示例(create-react-app)中,我试图通过用户输入更改state.name.

有人可以向我展示一个工作示例(我没有找到)或更好:文档在哪里？

linter的(第二个)错误是:

(54,24):错误TS2322:输入'{onChange:(e:Event)=> void; ''不能赋值为'DetailedHTMLProps,HTMLInputElement>'.输入'{onChange:(e:Event)=> void; }'不能赋值为'InputHTMLAttributes'.属性'onChange'的类型是不兼容的.类型'(e:Event)=> void'不能分配给'EventHandler> |类型 未定义".类型'(e:Event)=> void'不能分配给'EventHandler>'类型.参数"e"和"事件"的类型不兼容.类型'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;

Answer 1

改变你的

handleChange(e: Event)

同

handleChange (e: React.FormEvent<HTMLInputElement>)

和

e.target.name;

同

e.currentTarget.name;

此外,您可能想要更改

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

同

 <input onChange={this.handleChange} />