Typescript/onKeyPressのパラメータの正しい型は何ですか？

Question

Typescript 2.3.4、react 15.5.4、react-bootstrap 0.31.0。

私はFormControlを持っています。ユーザがEnterを押したときに何かしたいと思います。

制御：

<FormControl 
    name="keyword" 
    type="text" 
    value={this.state.keyword} 
    onKeyPress={this.handleKeywordKeypress} 
    onChange={(event: FormEvent<FormControlProps>) =>{ 
    this.setState({ 
     keyword: event.currentTarget.value as string 
    }); 
    }} 
/> 

はhandleKeywordKeypressのためのパラメータの定義は何をすべきですか？

私はこのようにそれを定義することができます。

が呼び出されます、そして、それは kepress: Enterを出力しますが、何が eのI型に対して値を比較することができるようにする必要があります

handleKeywordKeypress= (e: any) =>{ 
    log.debug("keypress: " + e.nativeEvent.code); 
}; 

（？何を）伝えるためにEnterを押した場合。あなたが行くならば、あなたはあなたの答えで特定したよう

handleKeywordKeypress: KeyboardEventHandler<FormControl> = e => { 
    // use e.keyCode in here 
} 

または

import { KeyboardEvent } from "react"; 
handleKeywordKeypress = (e: KeyboardEvent<FormControl>) => { 
    // use e.keyCode in here 
}; 

：

Answer 1

これは動作するようです：

handleKeywordKeyPress = (e: React.KeyboardEvent<FormControl>) =>{ 
    if(e.key == 'Enter'){ 
    if(this.isFormValid()){ 
     this.handleCreateClicked(); 
    } 
    } 
}; 

キー（。笑）ここに、私のために、React.KeyboardEventではなく、KeyboardEventを指定することでした。リアクトコードの周り

トローリング、私は次のように定義を見ていた。

type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>; 

しかし、私は私のハンドラのパラメータの型としてKeyboardEventを指定したとき、私は実際に指定されたKeyboardEventを拾ったことを認識していませんでした（Reactの定義ではなく）Typescriptライブラリのどこかにある。

Answer 2

onKeyPressの種類は、次のいずれかの方法で作成することができKeyboardEventHandler<T>、する必要があります2番目のオプションでは、具体的にReactのKeyboardEventを使用する必要があります。

keyCodeは、eのプロパティとして直接ご利用いただけます。 nativeEventでアクセスする必要はありません。

また、ジェネリック型パラメータTは、その小道具ではなくFormControlのコンポーネントである必要があります。そのため、他のハンドラも変更する必要があります。