【React】ENTERキー押下でsubmit。onKeyPressが非推奨みたいなので修正してみた。

2022年12月23日2023年1月19日

以前にこのような記事を書いたのですが、

【React】onKeyPressを使ってENTERキーでsubmitされるやつを再現してみる

一昔のWEBシステムではテキストフィールどに入力後、ENTERでsubmitができたわけですが、 <form acti ...

 https://waritotekito.com/?p=7507

どうも、onKeyPressというのが非推奨になっていたらしい。

onKeyUpかonKeyDownを使うことを推奨されてるようですが、以前の記事のような感じでonKeyDownを使用すると、日本語変換の確定時に押すEnterでもsubmitしてしまう。

これでは非常に都合が悪いので、対応策を考えてみる。

で、どうやらonCompositionStartとonCompositionEndというものを使うといいらしい。

これが何かといいますと、日本語入力の開始と終了時に発火するイベントらしい。

というわけでコードを修正。

const [composition, setComposition] = React.useState(false);
const keyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
  if (!composition && e.code === "Enter") {
    // Enter時に発生させたいイベント
  }
};

<TextField
    onKeyDown={(e) => keyDown(e)}
    onCompositionStart={() => setComposition(true)}
    onCompositionEnd={() => setComposition(false)}
/>

これで日本語入力変換後のENTERで動くようになる。

onCompositionStartは初めて知ったので勉強になった。