Typescript/React onKeyPress參數的正確類型是什麼？

Typescript 2.3.4，反應15.5.4和react-bootstrap 0.31.0。Typescript/React onKeyPress參數的正確類型是什麼？

我有一個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); 
};

將被調用，它將打印kepress: Enter，但我應該的e類型而定，這樣我可以對比較值（是什麼？）告訴如果Enter被按下。

來源

2017-09-28 Shorn

這可能有助於https://stackoverflow.com/questions/42081549/typescript-react-event-types –

這似乎工作：

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在Typescript庫中的某處（而不是React定義）。

來源

2017-09-29 00:16:41 Shorn

類型的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 
};

，如果與去第二個選項，您需要專門使用React的KeyboardEvent。

請注意，keyCode可直接作爲e上的財產使用;你不需要通過nativeEvent來訪問它。

而且，通用類型參數T應該是FormControl組件，而不是它的道具，所以您應該更改其他處理程序。

來源

2017-09-28 07:28:21

我不明白你的類型聲明如何讓我訪問我想要的數據而不需要轉換？看到我的答案。 – Shorn

你是對的，我編輯過，以改善我的答案。其中一些現在與你很相似，但希望在那裏還有一些額外的有用的東西。 –

Typescript/React onKeyPress參數的正確類型是什麼？

回答

相關問題