Typescript/React what's the correct type of the parameter for onKeyPress?

Question

Typescript 2.3.4, react 15.5.4 and react-bootstrap 0.31.0.

I have a

FormControl

and I want to do something when the user presses enter.

The control:

<FormControl

  name="keyword"

  type="text"

  value={this.state.keyword}

  onKeyPress={this.handleKeywordKeypress}

  onChange={(event: FormEvent<FormControlProps>) =>{

    this.setState({

      keyword: event.currentTarget.value as string

    });

  }}

/>

What should the definition of the parameter for

handleKeywordKeypress

be?

I can define it like this:

handleKeywordKeypress= (e: any) =>{

  log.debug("keypress: " + e.nativeEvent.code);

};

That will be called, and it will print

kepress: Enter

but what should the type of

e

be so that I can compare the value against (what?) to tell if Enter was pressed.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

Typescript/React what's the correct type of the parameter for onKeyPress?

Sign up