Typescript / React, какой правильный тип параметра для onKeyPress?

Машинопись 2.3.4, react 15.5.4 и react-bootstrap 0.31.0.

У меня есть 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, чтобы я мог сравнить значение с (с чем?), Чтобы определить, был ли нажат Enter.


reactjs typescript react-bootstrap
person Shorn    schedule 28.09.2017    source источник
comment
это может помочь stackoverflow.com/questions/42081549/   -  person Shubham Khatri    schedule 28.09.2017

Ответы (2)


arrow_upward
21
arrow_downward

Кажется, это работает:

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

Ключевым моментом (Ха-ха) здесь для меня было указать React.KeyboardEvent, а не KeyboardEvent.

Пробираясь по коду React, я видел такие определения, как:

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

Но не осознавал, что, когда я копировал / вставлял KeyboardEvent в качестве типа параметра для моего обработчика, компилятор фактически выбирал KeyboardEvent, который является своего рода типом по умолчанию, определенным где-то в библиотеках Typescript (а не в определении React).

person Shorn    schedule 29.09.2017
comment
Если вы хотите просто указать KeyBoardEvent, вам нужно импортировать его из React, вот и все. import {KeyboardEvent} from 'react'; - person unflores; 29.04.2020

arrow_upward
3
arrow_downward

Тип onKeyPress должен быть KeyboardEventHandler<T>, который можно записать одним из следующих способов:

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

or

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

Как вы указали в своем ответе, если вы выберете второй вариант, вам нужно будет специально использовать KeyboardEvent из React.

Обратите внимание, что keyCode напрямую доступен как свойство на e; вам не нужно получать к нему доступ через nativeEvent.

Кроме того, параметром универсального типа T должен быть компонент FormControl, а не его свойства, поэтому вам следует также изменить другой обработчик.

person Tom Fenech    schedule 28.09.2017
comment
Я не понимаю, как ваше объявление типа дает мне доступ к нужным мне данным без преобразования типов? Смотрите мой ответ. - person Shorn; 29.09.2017
comment
Вы правы, я отредактировал, чтобы улучшить свой ответ. Некоторые из них теперь очень похожи на ваши, но, надеюсь, в них есть еще несколько дополнительных полезных вещей. - person Tom Fenech; 29.09.2017