React 中的 onKeyPress

Irakli Tchigladze 2023年12月11日
  1. React 中的 onKeyPress
  2. React 中的 onKeyPressonKeyDown
  3. React 中的 onKeyDown
React 中的 onKeyPress

onKeyPress 是文字欄位的介面的一部分。它可以用於所有主要的 JavaScript 框架,包括 React。當你希望每次使用者在你的欄位中鍵入字母、數字或其他內容時執行函式時,此事件處理程式會很有用。你還可以指定哪個鍵應觸發事件的執行。

React 中的 onKeyPress

根據 MDN 的官方文件,不推薦使用 onKeyPress 事件。MDN 的開發人員不建議使用它。但是,不要失去希望 - 有一個可行的替代方案,我們將在本文的後面部分討論。

如果你想使用已棄用的 onKeyPress 事件,這裡是如何在 React 中處理 onKeyPress 事件。

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyPress = (e) => {
      if (e.key === 'Enter') {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyPress = {
      this.handleKeyPress
    } />
         </div>);
  }
}

此解決方案適用於 React 0.14.7 版。

此解決方案使用命名的 key 屬性來檢查使用者是否按下了 Enter 鍵。

if (e.key === 'Enter') {
  console.log('You must have pressed Enter ')
}

或者,你也可以使用 charCodecharKey 屬性在使用者按下特定鍵後觸發事件。同樣,讓我們​​看看如何有條件地檢查使用者是否按下了 Enter 鍵,該鍵的 charCode 為 13。

程式碼示例:

if (e.charCode === 13) {
  console.log('You must have pressed Enter ')
}

如果用這個替換以前使用的條件,結果將是相同的。事實上,charCode 屬性使用起來更安全,因為它在瀏覽器中比命名的 key 屬性得到更廣泛的支援。

keyCode 屬性不太可預測。在上面的例子中,如果我們 console.log(e.keyCode),我們會看到一個 0。這是因為一些新的編碼環境不支援它。如果你在編寫應用程式時遇到此問題,你可以使用 charCode 作為替代。

React 中的 onKeyPressonKeyDown

onKeyPress 已被 HTML 開發人員棄用。2021 年秋季,許多主要瀏覽器仍然支援它,但是一旦釋出了更新的瀏覽器版本,對 onKeyPress 的支援就會減少。因此,除非你有使用 onKeyPress 的非常具體的原因,請改用 onKeyDown,它的作用基本相同,但略有不同。

keyPress 事件僅針對產生字母數字值的鍵盤鍵觸發。這些包括用於鍵入空格的所有字母、數字、標點符號和鍵。修飾鍵,例如 AltShiftCtrl 不能觸發 onKeyPress 事件。

每次按下任何鍵時都會觸發 onKeyDown。生成字母數字值的鍵與不生成字母數字值的鍵之間沒有區別。按下 Backspace 和 Caps Lock 等鍵盤鍵將生成 onKeyDown 事件,但不會生成 onKeyPress

React 中的 onKeyDown

除了上面提到的細微差別之外,onKeyDown 事件本質上與 onKeyPress 相同。最重要的區別在於,它目前在所有主要瀏覽器中都得到支援,並且將在未來幾年內得到支援。

onKeyDown 也更加一致,無論你使用哪個 React 版本。

以下是相同的解決方案如何與 onKeyDown 一起使用:

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyDown = (e) => {
      if (e.keyCode === 13) {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyDown = {
      this.handleKeyDown
    } />
         </div>);
  }
}

請注意,為了檢查觸發 onKeyDown 事件的鍵,我們使用了 keyCode 屬性,該屬性無法通過 onKeyPress 訪問。

if (e.keyCode === 13) ```

同樣,我們也可以使用命名的 `key` 屬性:

```javascript
if (e.key === 'Enter') ```

無論哪種方式,如果我們選擇輸入並單擊 <kbd>Enter</kbd> 兩次,這就是我們的控制檯的樣子:

![React 中的 onKeyDown](</img/React/console onKeyDown.webp>)
Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn