フォームの処理などを実装していると、
input要素やtextarea要素で文字入力時の際に特定のキーの組み合わせで処理を実行したい事があります。
この記事ではReactでcmd + Enter（Mac）もしくはctrl + Enter（Windows）で処理を実行する方法をご紹介します。
検証した環境
| 1 | react | 17.0.2 |
| 2 | @types/react | 17.0.8 |
cmd + Enter・ctrl + Enterで処理を行う
どのキーが押されたかを判定するにはonKeyDownを用います。
import React, { VFC } from 'react'
const SampleInput: VFC = () => {
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
// cmd + Enter もしくは ctrl + Enter
if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
console.log('key down cmd + Enter')
}
}
return <input type="text" onKeyDown={handleKeyDown} />
}
export default SampleInputevent.key === 'Enter'はそのままの意味で「Enterを押されたか」
Macのcommandkeyは.metaKeyで判断出来るんですね。
Macintoshでは、Commandキー、WindowsではWindowsキーになります。
textareaの場合でも実装は一緒。（TypeScriptの場合は型だけ注意）
// 型がinputの時と変わる
const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
・・・
}
