Typoskript-Eingabe onchange event.target.value

In meiner React- und Typoskript-App verwende ich : onChange={(e) => data.motto = (e.target as any).value}.

Wie definiere ich die Typisierungen für die Klasse richtig, damit ich mich nicht mit dem Typensystem herumhacken muss any?

export interface InputProps extends React.HTMLProps<Input> {
...

}

export class Input extends React.Component<InputProps, {}> {
}

Wenn ich target: { value: string };sage, bekomme ich:

ERROR in [default] /react-onsenui.d.ts:87:18
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'.
  Types of property 'target' are incompatible.
    Type '{ value: string; }' is not assignable to type 'string'.

Im Allgemeinen sollten Event-Handler Folgendes verwenden e.currentTarget.value, z.

onChange = (e: React.FormEvent<HTMLInputElement>) => {
    const newValue = e.currentTarget.value;
}

Lesen Sie hier, warum dies so ist ( Setzen Sie "SyntheticEvent.target generisch machen, nicht SyntheticEvent.currentTarget." ).

UPD: Wie von @ roger-gusmao erwähnt, ChangeEventbesser geeignet für die Eingabe von Formularereignissen.

onChange = (e: React.ChangeEvent<HTMLInputElement>)=> {
   const newValue = e.target.value;
}

Die korrekte Verwendung in TypeScript ist

  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
        ...
        <input value={temperature} onChange={this.handleChange} />
        ...
    );
  }

Folgen Sie der gesamten Klasse, es ist besser zu verstehen:

import * as React from "react";

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};


interface TemperatureState {
   temperature: string;
}

interface TemperatureProps {
   scale: string;

}

class TemperatureInput extends React.Component<TemperatureProps, TemperatureState> {
  constructor(props: TemperatureProps) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  //  handleChange(e: { target: { value: string; }; }) {
  //    this.setState({temperature: e.target.value});  
  //  }


  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature} onChange={this.handleChange} />
      </fieldset>
    );
  }
}

export default TemperatureInput;

as HTMLInputElement funktioniert bei mir

Das, was targetSie hinzufügen wollten, InputPropsist nicht das gleiche, das targetSie wolltenReact.FormEvent

Die Lösung, die ich finden konnte, bestand darin, die ereignisbezogenen Typen zu erweitern, um Ihren Zieltyp hinzuzufügen:

interface MyEventTarget extends EventTarget {
    value: string
}

interface MyFormEvent<T> extends React.FormEvent<T> {
    target: MyEventTarget
}

interface InputProps extends React.HTMLProps<Input> {
    onChange?: React.EventHandler<MyFormEvent<Input>>;
}

Sobald Sie diese Klassen haben, können Sie Ihre Eingabekomponente als verwenden

<Input onChange={e => alert(e.target.value)} />

ohne Kompilierungsfehler. Tatsächlich können Sie auch die ersten beiden oben genannten Schnittstellen für Ihre anderen Komponenten verwenden.

Zum Glück finde ich eine Lösung. du kannst

{ChangeEvent} aus 'reagieren' importieren;

und dann schreibe Code wie: e:ChangeEvent<HTMLInputElement>

Hier ist ein Weg mit der ES6-Objektzerstörung, getestet mit TS 3.3.
Dieses Beispiel ist für eine Texteingabe.

name: string = '';

private updateName({ target }: { target: HTMLInputElement }) {
    this.name = target.value;
}

Dies ist, wenn Sie mit einem FileListObjekt arbeiten:

onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
  const fileListObj: FileList | null = event.target.files;
  if (Object.keys(fileListObj as Object).length > 3) {
    alert('Only three images pleaseeeee :)');
  } else {
    // Do something
  }

  return;
}}

  function handle_change(
    evt: React.ChangeEvent<HTMLInputElement>
  ): string {
    evt.persist(); // This is needed so you can actually get the currentTarget
    const inputValue = evt.currentTarget.value;

    return inputValue
  }

Und stellen Sie sicher, dass Sie "lib": ["dom"]in Ihrem haben tsconfig.

Bei Verwendung der untergeordneten Komponente überprüfen wir den Typ wie folgt.

Übergeordnete Komponente:

export default () => {

  const onChangeHandler = ((e: React.ChangeEvent<HTMLInputElement>): void => {
    console.log(e.currentTarget.value)
  }

  return (
    <div>
      <Input onChange={onChangeHandler} />
    </div>
  );
}

Untergeordnete Komponente:

type Props = {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export Input:React.FC<Props> ({onChange}) => (
  <input type="tex" onChange={onChange} />
)

Eine Alternative, die noch nicht erwähnt wurde, besteht darin, die onChange-Funktion anstelle der empfangenen Requisiten einzugeben. Verwenden von React.ChangeEventHandler:

const stateChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    console.log(event.target.value);
};

Danke @haind

Ja HTMLInputElementhat für das Eingabefeld funktioniert

//Example
var elem = e.currentTarget as HTMLInputElement;
elem.setAttribute('my-attribute','my value');
elem.value='5';

Diese HTMLInputElementSchnittstelle wird HTMLElementgeerbt, von der EventTargetauf Stammebene geerbt wird. Daher können wir mit dem asOperator behaupten, bestimmte Schnittstellen entsprechend dem Kontext zu verwenden, wie in diesem Fall, den wir HTMLInputElementfür Eingabefelder verwenden, andere Schnittstellen usw. sein HTMLButtonElementkönnen HTMLImageElement.

Weitere Informationen finden Sie hier

• Web-API-Schnittstellen von Mozilla
• Schnittstellen in externen Knotenmodulen von Microsoft