TypeScript＆React - 複数の入力フィールドの1つのonChangeハンドラー

Question

複数の入力フィールドを持つフォームがあります。通常のES6/Reactでは、すべての入力フィールドが自分のonChangeハンドラを指し示す単一のメソッドを作成します。このような何か：

handleChange(e) { 
    e.preventDefault(); 
    this.setState({[e.target.name]: e.target.value}); 
} 

これは、フォーム要素がたくさんあるし、それらのそれぞれを処理するための具体的な方法を作成する必要はありません場合に役立ちます。

これはTypeScriptで可能ですか？たとえそれが型保証されていないとしても？

Answer 1

コメントの回答として、JavaScriptでできることはすべてTypeScriptでも有効です。

しかし、私はあなたが設定したコンパイラオプションに応じて、TypeScriptコンパイラからエラーが発生していると思います。あなたのコンポーネントを想定し

はこのようなものになります。

interface ComponentProps { } 
interface ComponentState { 
    name: string 
    address: string 
} 

class MyComponent extends React.Component<ComponentProps, ComponentState> { 
    handleChange(e) { 
    e.preventDefault() 
    this.setState({ [e.target.name]: e.target.value }) 
    } 
} 

を、私はこのエラーを取得しています：

== External: (30,19): error TS2345: Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'ComponentState'.

== External: Property 'name' is missing in type '{ [x: number]: any; }'.

そして（私が使用したい）noImplicitAnyコンパイラオプションを使用して、この追加エラー：

== External: (28,16): error TS7006: Parameter 'e' implicitly has an 'any' type.

コードが正しいことを確認した場合は、沈黙が明示的にhandleChangeのためのパラメータとsetState

handleChange(e: any) { 
    e.preventDefault() 
    this.setState({ [e.target.name]: e.target.value } as ComponentState) 
    }