Typescript/OnKeyPress에 대한 올바른 매개 변수 유형은 무엇입니까?

Typescript/OnKeyPress에 대한 올바른 매개 변수 유형은 무엇입니까?

타입 스크립트 2.3.4, 리액트 15.5.4 및 리액트 부트스트랩 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그렇습니까?

다음과 같이 정의할 수 있습니다.

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

그것은 호출될 것이고, 그것은 인쇄될 것이다.keypress: Enter하지만 어떤 타입이 좋을까?e값을 (무엇과) 비교하여 Enter 키를 눌렀는지 확인할 수 있습니다.

이것은 효과가 있는 것 같습니다.

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

여기서의_{(Ha ha)} 핵심은, 나에게 있어,React.KeyboardEvent,보다는KeyboardEvent.

React 코드를 살펴보니 다음과 같은 정의가 있었습니다.

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

하지만 복사/붙여넣을 때는 몰랐습니다.KeyboardEvent내 핸들러의 파라미터 타입으로서 컴파일러는 실제로 그 컴파일러가KeyboardEvent이것은 (React 정의가 아닌) Typescript 라이브러리에서 정의된 일종의 기본 유형입니다.

위의 두 답변 모두 문제를 해결하지 못했습니다.매우 간단하고 알기 쉬울 것입니다.

import { KeyboardEvent } from 'react';

const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
   // do stuff
};

의 종류onKeyPress그래야 한다KeyboardEventHandler<T>는, 다음의 몇개의 방법으로 기술할 수 있습니다.

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

또는

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

답변에서 식별한 바와 같이 두 번째 옵션을 선택할 경우 구체적으로 다음을 사용해야 합니다.KeyboardEvent리액트로부터.

주의:keyCode의 속성으로 직접 사용 가능e; 를 사용하여 액세스 할 필요가 없습니다.nativeEvent.

또한 Generic type 파라미터는T가 되어야 합니다.FormControl컴포넌트 대신 컴포넌트를 사용할 수 있으므로 다른 핸들러도 교체해야 합니다.

답변은 이 페이지에 있는 두 가지 답변의 조합입니다. 이 답변은 React만 적용하면 됩니다.

@Shorn님 감사합니다React.KeyboardEvent @ 언더프랑켄우드:HTMLInputElement

import React from "react";
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
   // ...
};

언급URL : https://stackoverflow.com/questions/46462841/typescript-react-whats-the-correct-type-of-the-parameter-for-onkeypress