Morioh
Login
中條 美冬

中條 美冬

7 months ago

React でキーボード イベントを実装する

キーボード イベントは、キーボードのキーを押したり、押し続けたり、放したりしたときにコンピューターまたは Web ブラウザに送信される通知です。これらのイベントは、ユーザー入力に応答し、それに応じてアクションを実行するために、アプリケーションや Web サイトによって使用されます。 

このチュートリアルでは、キーボード イベントと、React でそれらを処理する方法を学習します。

JavaScript のイベント

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 のイベント

React でのイベントの処理は、HTML でのイベントとは少し異なります。たとえば、HTML のクリック ハンドラーは次のように実行されます。

<button onclick="launchApp()">
		Click Me
</button>

React では、これは次のように行われます。

<button onClick={launchApp}>
		Click Me
</button>

ここでの主な違いは何でしょうか? 

  • React のイベントは、キャメルケースで名前が付けられます。
  • React では、関数の文字列表現を渡すのではなく、JSX により関数自体を中括弧内のハンドラーとして渡します。

React のキーボード イベント

これまでの 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 でキーボード イベントを実装する方法を理解しました。

3.60 GEEK