web-dev-qa-db-ja.com

タイプスクリプト入力onchange event.target.value

ReactおよびTypeScriptアプリでは、onChange={(e) => data.motto = (e.target as any).value}を使用します。

クラスの型付けを正しく定義するにはどうすればよいですか？したがって、anyを使用して型システムを回避する必要はありませんか？

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

}

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

target: { value: string };と入力すると、次のようになります。

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'.
reactjstypescripttypestypescript-typings
63
Cat Boss

通常、イベントハンドラーはe.currentTarget.valueを使用する必要があります。例：

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

その理由はここで確認できます（ 「SyntheticEvent.currentTargetではなくSyntheticEvent.targetジェネリックにする」 に戻します）。

UPD：@ roger-gusmaoで述べたようにChangeEventはフォームイベントの入力により適しています。

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

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

完全なクラスに従ってください、理解する方が良いです：

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;
54
Roger Gusmao

as HTMLInputElementは私のために働く

6
haind

targetに追加しようとしたInputPropsは、React.FormEventにあるtargetとは異なります

だから、私が思いついた解決策は、次のように、イベントに関連するタイプを拡張してターゲットタイプを追加することでした：

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

これらのクラスを取得したら、入力コンポーネントを次のように使用できます。

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

コンパイルエラーなし。実際、上記の最初の2つのインターフェイスを他のコンポーネントに使用することもできます。

6
Leone

幸運なことに解決策を見つけました。あなたはできる

「React」から{ChangeEvent}をインポートします。

そして次のようなコードを書きます：e:ChangeEvent<HTMLInputElement>

2
Linshuizhaoying

TS 3.3でテストされたES6オブジェクトの構造化の方法を次に示します。
この例はテキスト入力用です。

name: string = '';

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