【React】onKeyPressを使ってENTERキーでsubmitされるやつを再現してみる
一昔のWEBシステムではテキストフィールどに入力後、ENTERでsubmitができたわけですが、
<form action="/">
<input type="text" />
<input type="submit" />
</form>たしかこんな感じで書いてたはず。
これで、ENTER押したらsubmitが押されたことになってたのですが、Reactとかだとこうなってないのでこれを再現したい。
やりかたは簡単。
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
const submit = () => {
//submitの時の処理
}
const KeyPress = (e) => {
if (e.code === "Enter") {
submit();
}
}
<TextField onKeyPress={(e) => keyPress(e)} />
<Button onClick={submit}>submit</Button>
// ホントはtexitfieldにonchengeイベントとかいるけど、typescriptで書くとこんな感じだと思う。
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
const submit = () => {
//submitの時の処理
}
const KeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (e.code === "Enter") {
submit();
}
}
<TextField onKeyPress={(e) => keyPress(e)} />
<Button onClick={submit}>submit</Button>
これでENTER押したときにsubmitが動くのを再現できる。
これなにをしているかといいますと、onKeyPressイベントでキーボードのどこを押下したかが分かるので、ENTERが押されてたらボタンを押したときと同じ処理が動くようにしてる。
こんな感じで、codeに押したキーが出てる。
ほんとはまだプロパティあるけど、長くなるので省略。
なんか、BackSpaceとか反応しないキーもあるみたいね。。。
というわけで、これでENTERで確定される動きの再現ができます。