やりたいこと
キーワード検索時にボタンをクリックさせずにEnterキーを押すことで検索を実行したい。
ただし、日本語変換を確定させるEnterには反応したくない
結論
下記のイベントハンドラを使用する
イベントハンドラ | 内容 |
---|---|
onKeyDown | 何かしらのキーが押されたときに発火 |
onCompositionStart | 変換が開始したときに発火 |
onCompositionEnd | 変換が終了したときに発火 |
サンプルコード
Enterで入力確定
// JS部分
function handleKeyDown(event) {
if (event.key === 'Enter') {
// 入力を確定したときの処理(検索実行)
}
}
// HTML部分
<input onKeyDown={handleKeyEvent}>
日本語変換の確定と、入力の確定を判定する
// JS部分
const [isComposing, setIsComposing] = useState(false);
function handleKeyDown(event) {
if (event.key === 'Enter' && !isComposing) {
// 入力を確定したときの処理(検索実行)
}
}
// HTML部分
<input
onKeyDown={handleKeyDown}
onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={() => setIsComposing(false)}
/>