Input skrip onchange event.target.value

Dalam bereaksi dan app saya naskah, saya menggunakan: onChange={(e) => data.motto = (e.target as any).value}.

Bagaimana cara saya mendefinisikan typing untuk kelas dengan benar, jadi saya tidak perlu meretas jalan saya dengan sistem type any?

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

}

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

Jika saya menempatkan target: { value: string };saya mendapatkan:

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

Umumnya penangan acara harus menggunakan e.currentTarget.value, misalnya:

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

Anda dapat membaca mengapa demikian di sini ( Kembalikan "Jadikan SyntheticEvent.target generik, bukan SyntheticEvent.currentTarget." ).

UPD: Seperti yang disebutkan oleh @ roger-gusmao ChangeEventlebih cocok untuk mengetik acara bentuk.

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

cara yang benar untuk digunakan dalam TypeScript adalah

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

Ikuti kelas lengkap, lebih baik untuk memahami:

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 bekerja untukku

The targetAnda mencoba untuk menambahkan InputPropstidak sama targetAnda ingin yang diReact.FormEvent

Jadi, solusi yang dapat saya buat adalah, memperluas jenis acara terkait untuk menambahkan jenis target Anda, seperti:

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

Setelah Anda memiliki kelas-kelas itu, Anda dapat menggunakan komponen input Anda sebagai

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

tanpa kesalahan kompilasi. Bahkan, Anda juga dapat menggunakan dua antarmuka pertama di atas untuk komponen lainnya.

beruntung saya menemukan solusinya. kamu bisa

impor {ChangeEvent} dari 'react';

lalu tulis kode seperti: e:ChangeEvent<HTMLInputElement>

Berikut ini cara penghancuran objek ES6, diuji dengan TS 3.3.
Contoh ini untuk input teks.

name: string = '';

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

Ini adalah ketika Anda bekerja dengan FileListObyek:

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
  }

Dan pastikan Anda memiliki "lib": ["dom"]di Anda tsconfig.

Saat menggunakan Komponen Anak Kami memeriksa jenis seperti ini.

Komponen Induk:

export default () => {

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

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

Komponen anak:

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

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

Alternatif yang belum disebutkan adalah mengetikkan fungsi onChange bukan props yang diterimanya. Menggunakan React.ChangeEventHandler:

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

Terima kasih @ haind

Ya HTMLInputElementberfungsi untuk bidang input

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

Ini HTMLInputElementadalah antarmuka yang diwarisi dari HTMLElementyang diwarisi dari EventTargetpada tingkat root. Oleh karena itu kita dapat menegaskan menggunakan asoperator untuk menggunakan antarmuka spesifik sesuai dengan konteks seperti dalam kasus ini kita gunakan HTMLInputElementuntuk bidang input antarmuka lain dapat HTMLButtonElement, HTMLImageElementdll.

Untuk referensi lebih lanjut Anda dapat memeriksa antarmuka lain yang tersedia di sini

• Antarmuka API Web oleh Mozilla
• Antarmuka dalam Modul Node Eksternal oleh Microsoft