🍑

Command + Enter で submit関数を実行したい

2021/08/14に公開

概要

Input text で入力している間に ⌘ + Enter で submit したい。

Command + Enter で関数を実行する

入力キーを判断する関数

実行したい関数を引数に与える

export const doFunctionWhenEnterPlusMetaKey = (
  element: React.KeyboardEvent<HTMLInputElement>,
  func: () => void
) => {
  if (element.key === 'Enter' && element.metaKey) {
    element.preventDefault()
    func()
  }
}

使用例

onKeyPress だとうまくいかない。( 個人的なつまりポイントでした )

onSubmit は実行したい関数。

<input
  type="text"
  onKeyDown={(e) => {
    doFunctionWhenEnterPlusMetaKey(e, onSubmit)
  }}
/>

Discussion