[React] inputにフォーカスしてる時にEnterキー押下で送信する
7737 ワード
やりたいこと
inputで予測変換候補が出ていない時にEnterが押されたらsubmit関数叩きたい
isComposingを使用する
keydownのEventのプロパティにisComposingというものがある
変換開始（compositionstart）〜変換終了(compositionend）までの間、trueを返してくれる
ref: isComposing
ref: compositionstart
ref: compositionend
サッと試すなら下記のような感じ
document.getElementById("hoge").addEventListener("keydown",(e)=>{
console.log(e.isComposing)
// false
})
Reactで実際に使用する
const Hoge:React.FC = ():JSX.Element => {
/** ボタン押下orEnterで呼ばれる */
const handleSubmit = (
e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>,
) => {
console.log('Click')
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.nativeEvent.isComposing || e.key !== 'Enter') return
handleSubmit(e)
}
return(
<div>
<input onKeyDown={handleKeyDown} />
<button onSubmit={handleSubmit}>submit</button>
</div>
)
}
ポイント💡
🙅♀️ event.isComposing エラー起こる
🙆♂️ event.nativeEvent.isComposing booleanが返ってくる
KeyboardEventの中にisComposingがないから「コントリュビュートチャンスか!?」と1分でパッチ書いてコントリビューター向けドキュメント1時間かけて読んでぷるり下書き作り終わってからnativeEventの存在に気づいた
愚かな理由でGWの貴重な1時間1分を無駄にしてしまった……
Author And Source
この問題について([React] inputにフォーカスしてる時にEnterキー押下で送信する), 我々は、より多くの情報をここで見つけました https://zenn.dev/takky94/articles/f3096bb59761ee著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol