Input dattiloscritto onchange event.target.value

Nel mio reagire e app dattiloscritto, io uso: onChange={(e) => data.motto = (e.target as any).value}.

Come definisco correttamente le tipizzazioni per la classe, quindi non dovrei scavalcare il sistema di tipi con any?

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

}

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

Se lo metto target: { value: string };ottengo:

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

Generalmente i gestori di eventi dovrebbero usare e.currentTarget.value, ad esempio:

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

Puoi leggere il motivo per cui qui ( Ripristina "Rendi SyntheticEvent.target generico, non SyntheticEvent.currentTarget." ).

UPD: come menzionato da @ roger-gusmao ChangeEventpiù adatto per la digitazione di eventi di moduli.

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

il modo corretto di usare in TypeScript è

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

Segui la lezione completa, è meglio capire:

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 per me va bene

Il targettentativo di aggiunta InputPropsnon è lo stesso targetdesideratoReact.FormEvent

Quindi, la soluzione che ho potuto trovare è stata l'estensione dei tipi relativi all'evento per aggiungere il tipo di destinazione, come:

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

Una volta che hai queste classi, puoi usare il tuo componente di input come

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

senza errori di compilazione. In effetti, puoi anche usare le prime due interfacce sopra per gli altri componenti.

fortunata trovo una soluzione. Puoi

importare {ChangeEvent} da 'reagire';

e quindi scrivere codice come: e:ChangeEvent<HTMLInputElement>

Ecco un modo con la distruzione di oggetti ES6, testato con TS 3.3.
Questo esempio è per un input di testo.

name: string = '';

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

Questo è quando lavori con un FileListoggetto:

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
  }

E assicurati di averlo "lib": ["dom"]nel tuo tsconfig.

Quando si utilizza il componente figlio Controlliamo il tipo in questo modo.

Componente principale:

export default () => {

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

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

Componente figlio:

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

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

Un'alternativa che non è stata ancora menzionata è quella di digitare la funzione onChange invece degli oggetti di scena che riceve. Utilizzando React.ChangeEventHandler:

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

Grazie @haind

Sì ha HTMLInputElementfunzionato per il campo di input

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

Questa HTMLInputElementinterfaccia è ereditata da HTMLElementcui è ereditata EventTargeta livello di root. Pertanto possiamo affermare di utilizzare l' asoperatore per utilizzare interfacce specifiche in base al contesto come in questo caso che stiamo usando HTMLInputElementper il campo di input che possono essere altre interfacce HTMLButtonElement, HTMLImageElementecc.

Per ulteriori riferimenti è possibile controllare altre interfacce disponibili qui

• Interfacce API Web di Mozilla
• Interfacce in moduli di nodi esterni di Microsoft