React 中的 onKeyPress

1. React 中的 onKeyPress
2. React 中的 onKeyPress 與 onKeyDown
3. React 中的 onKeyDown

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 ')
}

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

程式碼示例：

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

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

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

React 中的 onKeyPress 與 onKeyDown

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

keyPress 事件僅針對產生字母數字值的鍵盤鍵觸發。這些包括用於鍵入空格的所有字母、數字、標點符號和鍵。修飾鍵，例如 Alt、Shift 或 Ctrl 不能觸發 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 屬性：

if(e.key === "Enter")

無論哪種方式，如果我們選擇輸入並單擊 Enter 兩次，這就是我們的控制檯的樣子：