キーボード イベントは、キーボードのキーを押したり、押し続けたり、放したりしたときにコンピューターまたは Web ブラウザに送信される通知です。これらのイベントは、ユーザー入力に応答し、それに応じてアクションを実行するために、アプリケーションや Web サイトによって使用されます。
このチュートリアルでは、キーボード イベントと、React でそれらを処理する方法を学習します。
JavaScript では、イベントは単にユーザーが特定のアクションを実行したことを示すものです。 keydown および keyup イベントをリッスンでき、キーボードがいつ操作されたかを示します。キーが押されるか放されます。
以下は、JavaScript を使用してキーボード イベントを実装するための典型的なコード ブロックの例です。次のコードブロックは、ユーザーが押した特定のキーを示すステートメントをログに記録します。
document.addEventListener('keydown', function(event){
console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);
)
各キーには、コールバック関数に渡されるKeyboardEventで使用できる一意の識別子があることに注意してください。上記のコードブロックでは、キーが押されたときにコンソールに次の内容が表示されます。
# Key: Alt has been pressed
# Key: ArrowDown has been pressed
React でのイベントの処理は、HTML でのイベントとは少し異なります。たとえば、HTML のクリック ハンドラーは次のように実行されます。
<button onclick="launchApp()">
Click Me
</button>
React では、これは次のように行われます。
<button onClick={launchApp}>
Click Me
</button>
ここでの主な違いは何でしょうか?
これまでの React のイベントに関する一般的な知識を基に、React にキーボード イベントを実装できるようになりました。前述したように、キーアップ と キーダウン< という 2 つのキーボード イベントを使用できます。 a i=4> イベント
次に、「はい」または「いいえ」の回答に基づいてユーザーをマークする簡単なクイズ アプリを構築します。
まず、create-react-app をセットアップするか、https://react.new にアクセスして、コードサンドボックス経由で完全に構成された React 環境を取得します。 .
import React from 'react';
function Quiz(){
handleAnswerChange(event){
if(event.key === 'y'){
alert('The sky is your starting point!')
}
else if (event.key === 'n') {
alert('The sky is your limit👀')
}
}
return (
<div>
<p> Are You Smart?</p>
<input type="text" value={answer} onKeyPress={handleAnswerChange}/>
<small> Press Y for Yes or N for No</small>
</div>
)
}
上記のコード ブロックは、handleAnswerChange という単純な関数を実装しています。この関数は、押されたキーが y であるかどうかを確認します。はいの場合は n いいえの場合。値 y または n は、input 要素の keypress イベント リスナーから取得されます。
このガイド。 React と HTML のイベントを比較対照し、React でキーボード イベントを実装する方法を理解しました。