Typescript input onchange event.target.value

Benim tepki ve daktilo uygulamasında, ben kullanın: onChange={(e) => data.motto = (e.target as any).value}.

Sınıf için yazımları nasıl doğru bir şekilde tanımlarım, böylelikle yazım sisteminde yolumu kesmek zorunda kalmazdım any?

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

}

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

Eğer koyarsam target: { value: string };alırım:

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

Genellikle olay işleyicileri e.currentTarget.value, örneğin şunları kullanmalıdır :

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

Neden böyle olduğunu buradan okuyabilirsiniz ( "Make SyntheticEvent.target, SyntheticEvent.currentTarget'i değil jenerik yap." ).

UPD: @ roger-gusmao'da belirtildiği gibi, ChangeEventform olaylarını yazmak için daha uygundur.

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

TypeScript'te kullanmanın doğru yolu

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

Tüm dersi takip edin, anlamak daha iyidir:

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 benim için çalışıyor

targetEğer eklemek çalıştı InputPropsaynı değildir targetiçinde olan istediğiniReact.FormEvent

Bu nedenle, bulabileceğim çözüm, olayla ilgili türleri, hedef türünüzü eklemek için genişletmek oldu:

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

Bu sınıflara sahip olduğunuzda, giriş bileşeninizi şu şekilde kullanabilirsiniz:

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

derleme hataları olmadan. Aslında yukarıdaki ilk iki arayüzü diğer bileşenleriniz için de kullanabilirsiniz.

şanslıyım bir çözüm buldum. yapabilirsin

{ChangeEvent} 'react'ten içe aktar;

ve sonra şu şekilde kod yazın: e:ChangeEvent<HTMLInputElement>

İşte ES6 nesne imhası ile TS 3.3 ile test edilen bir yol.
Bu örnek, bir metin girişi içindir.

name: string = '';

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

Bu, bir FileListNesne ile çalıştığınız zamandır:

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
  }

Ve emin olun olun "lib": ["dom"]Gözlerinde farklı tsconfig.

Alt Bileşeni kullanırken, türü şu şekilde kontrol ederiz.

Ana Bileşen:

export default () => {

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

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

Alt Bileşen:

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

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

Henüz bahsedilmeyen bir alternatif, aldığı props yerine onChange işlevini yazmaktır. React.ChangeEventHandler'ı kullanma:

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

Teşekkürler @haind

Evet HTMLInputElement, giriş alanı için çalıştı

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

Bu HTMLInputElementarayüz gelen devralır olmasıdır HTMLElementmiras olan EventTargetkök seviyesinde. Bu nedenle kullanarak iddia edebilir asbu durumda kullandığımız gibi bağlama göre belirli arayüzleri kullanımı operatörü HTMLInputElementdiğer arayüzleri olabilir giriş alanı için HTMLButtonElement, HTMLImageElementvs.

Daha fazla referans için diğer mevcut arayüzleri buradan kontrol edebilirsiniz.

• Mozilla'nın web API arayüzleri
• Microsoft'tan Harici Düğüm Modüllerindeki Arayüzler