Typescript 2.3.4, react 15.5.4 and react-bootstrap 0.31.0.
I have a
FormControl
<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
handleKeywordKeypress= (e: any) =>{
log.debug("keypress: " + e.nativeEvent.code);
};
kepress: Enter
e
This seems to work:
handleKeywordKeyPress = (e: React.KeyboardEvent<FormControl>) =>{
if( e.key == 'Enter' ){
if( this.isFormValid() ){
this.handleCreateClicked();
}
}
};
The key (HaHa.) here, for me, was to specify React.KeyboardEvent
, rather than KeyboardEvent
.
Trolling around the React code, I was seeing definitions like:
type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;
But didn't realise that when I was specifying KeyboardEvent
as the parameter type for my handler, I was actually picking up the KeyboardEvent
specified in the Typescript libraries somewhere (rather than the React definition).