打字稿用用户输入反应 setState

Posted 2023-02-22

【中文标题】打字稿用用户输入反应 setState

【英文标题】：typescript react setState with user input

【发布时间】：2018-03-21 19:39:51

【问题描述】：

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

谁能给我看一个工作示例（我没有找到）或更好的示例：文档在哪里？

linter 的（第二个）错误是：

(54,24): error TS2322: Type ' onChange: (e: Event) => void; ' 不是 可分配给类型 '详细的htmlProps, HTML输入元素>'。输入 ' onChange: (e: Event) => void; ' 不是 可分配给类型“InputHTMLAttributes”。 属性“onChange”的类型不兼容。 类型 '(e: Event) => void' 不可分配给类型 'EventHandler> |不明确的'。 类型“（e：事件）=> 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;

【参考方案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 />