Reactでcmd + Enter(ctrl + Enter)で処理を行う

2021.08.25
Reactでcmd + Enter(ctrl + Enter)で処理を行う

フォームの処理などを実装していると、

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 SampleInput

event.key === 'Enter'はそのままの意味で「Enterを押されたか」


Macのcommandkeyは.metaKeyで判断出来るんですね。

Macintoshでは、Commandキー、WindowsではWindowsキーになります。


.metaKey | JavaScript 日本語リファレンス | js STUDIO より引用




textareaの場合でも実装は一緒。(TypeScriptの場合は型だけ注意)

// 型がinputの時と変わる
const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
  ・・・
}

おすすめ