reactjs - typescript react setState med brukerinput

I dette grunnleggende eksempelet på TypeScript React (create-react-app) prøver jeg å endre state.name gjennom brukerinput.

Kan noen vise meg et fungerende eksempel (som jeg ikke har funnet) eller bedre: hvor dokumentasjonen er?

Den (andre) feilen til lint-verktøyet er:

(54,24): feil TS2322: Type '{ onChange: (e: Event) => void; }' kan ikke tilordnes typen 'DetailedHTMLProps, HTMLInputElement>'. Type '{ onChange: (e: Event) => void; }' kan ikke tilordnes typen 'InputHTMLAttributes'. Typer for egenskapen 'onChange' er inkompatible. Type '(e: Event) => void' kan ikke tilordnes typen 'EventHandler | undefined'. Type '(e: Event) => void' kan ikke tilordnes typen 'EventHandler'. Typene til parameterne 'e' og 'event' er inkompatible. Type 'ChangeEvent' kan ikke tilordnes typen 'Event'. Egenskapen 'cancelBubble' mangler i typen 'ChangeEvent'.

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;

Svar #1

Endre din

handleChange(e: Event)

med

handleChange (e: React.FormEvent<HTMLInputElement>)

og

e.target.name;

med

e.currentTarget.name;

Du vil kanskje også endre

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

med

 <input onChange={this.handleChange} />

Relaterte artikler