React の onKeyPress

1. React の onKeyPress
2. React の onKeyPress と onKeyDown
3. React の onKeyDown

onKeyPress は、テキストフィールドのインターフェイスの一部です。React を含むすべての主要な JavaScript フレームワークで使用できます。このイベントハンドラーは、ユーザーがフィールドに文字や数字などを入力するたびに関数を実行する場合に役立ちます。イベントの実行をトリガーするキーを指定することもできます。

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 および playcode.io React プレイグラウンドで機能します。

このソリューションでは、名前付きの key 属性を使用して、ユーザーが Enter キーを押したかどうかを確認します。

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

または、charCode または charKey 属性を使用して、ユーザーが特定のキーを押した後にイベントを発生させることもできます。繰り返しになりますが、ユーザーが charCode が 13 の Enter キーを押したことを条件付きで確認する方法を見てみましょう。

コード例：

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 や CapsLock などのキーボードキーを押すと、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 イベントを発生させたキーを確認するには、onKeyPress ではアクセスできなかった keyCode プロパティを使用することに注意してください。

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

同様に、名前付きの `key` 属性を使用することもできます。

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

いずれにせよ、入力を選択して <kbd>Enter</kbd> を 2 回クリックすると、コンソールは次のようになります。

![React の onKeyDown](</img/React/console-onKeyDown.webp>)