[メモ]: inputタグでEnterをクリックしたときに特定の処理を実行する

inputタグでEnterをクリックしたときに特定の処理を実行する

例えば下のようなEnterキーを押すとタグが追加されるみたいな動作を実装したいときがある。しかしform内のinputでEnterを押したらフォームのonSubmitが走ってしまうのでその回避方法を調べたときのメモ

https://zenn.dev/takasy/articles/react-tags-inputより拝借

結論

onKeyDown内で押されたキーがEnterキーかどうかをチェックすることで実現できる。

import { Input } from "@/components/ui/input";
import { useState } from "react";

const Comp = () => {
  const [array, setArray] = useState<string[]>([])
  return (
    <div className="h-full pt-48">
      <ul>
        {array.map((item, i) => <li key={`${item}-${i}`} className="list-disc">{item}</li>)}
      </ul>
      <Input 
        type="text"
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            e.preventDefault();
            
            setArray([...array, e.currentTarget.value])
          }
        }}
        />
    </div>
  )
};

動作画面

最後に

間違っていることあればコメントに書いていただけると幸いです。
よろしくお願いいたします。