Entrée typographique onchange event.target.value

Dans ma réaction et l' application tapuscrit, je l' utilise: onChange={(e) => data.motto = (e.target as any).value}.

Comment définir correctement les typages de la classe, pour ne pas avoir à me frayer un chemin dans le système de types avec any?

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

}

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

Si je mets target: { value: string };j'obtiens:

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'.

En général, les gestionnaires d'événements devraient utiliser e.currentTarget.value, par exemple:

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

Vous pouvez lire pourquoi ici ( Revert "Rendre SyntheticEvent.target générique, pas SyntheticEvent.currentTarget." ).

UPD: Comme mentionné par @ roger-gusmao, ChangeEventplus approprié pour taper des événements de formulaire.

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

la bonne façon d'utiliser dans TypeScript est

  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} />
        ...
    );
  }

Suivez le cours complet, il vaut mieux comprendre:

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 travaille pour moi

Le que targetvous avez essayé d'ajouter InputPropsn'est pas le même que targetvous vouliez qui estReact.FormEvent

Donc, la solution que j'ai pu trouver était d'étendre les types liés aux événements pour ajouter votre type de cible, comme:

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>>;
}

Une fois que vous avez ces classes, vous pouvez utiliser votre composant d'entrée comme

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

sans erreurs de compilation. En fait, vous pouvez également utiliser les deux premières interfaces ci-dessus pour vos autres composants.

chanceux je trouve une solution. vous pouvez

import {ChangeEvent} de 'react';

puis écrivez du code comme: e:ChangeEvent<HTMLInputElement>

Voici une méthode de déstructuration d'objets ES6, testée avec TS 3.3.
Cet exemple concerne une saisie de texte.

name: string = '';

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

C'est lorsque vous travaillez avec un FileListobjet:

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
  }

Et assurez-vous d'avoir "lib": ["dom"]dans votre fichier tsconfig.

Lors de l'utilisation du composant enfant, nous vérifions le type comme ceci.

Composant parent:

export default () => {

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

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

Composant enfant:

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

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

Une alternative qui n'a pas encore été mentionnée est de taper la fonction onChange au lieu des accessoires qu'elle reçoit. Utilisation de React.ChangeEventHandler:

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

Merci @haind

Oui a HTMLInputElementtravaillé pour le champ de saisie

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

Il HTMLInputElements'agit d'une interface HTMLElementhéritée de laquelle est héritée EventTargetau niveau racine. Par conséquent, nous pouvons affirmer en utilisant un asopérateur d'utiliser des interfaces spécifiques en fonction du contexte, comme dans ce cas, nous utilisons HTMLInputElementpour le champ de saisie d'autres interfaces HTMLButtonElement, HTMLImageElementetc.

Pour plus de références, vous pouvez consulter une autre interface disponible ici

• Interfaces API Web par Mozilla
• Interfaces dans les modules de nœuds externes par Microsoft