首页 文章

typescript使用户输入反应setState

提问于
浏览 次
3

在这个基本的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;
reactjs typescript

1 回答

  • 4

    改变你的

    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} />
    回复于

相关问题