
要求
React の以下のようなコンポーネントがあり、onKeyDownHandler
で"文字の変換を確定したときのエンターキー押下"と"それ以外のエンターキー押下"を区別したい。
const Component = () => {
const onKeyDownHandler = (e) => {
if (e.key === 'Enter') {
// これだと全てのエンターキー押下でこのブロックに到達する
}
};
return <input onKeyDown={onKeyDownHandler} />;
};
解決法
onCompositionStart と onCompositionEnd で変換を検知する。詳しくはこちら
const Component = () => {
const [isComposing, setComposing] = useState(false);
const onKeyDownHandler = () => {
if (e.key === 'Enter' && !isComposing) {
// 変換のためのエンターキー押下のときはここに到達しない
}
};
return <input
onKeyDown={onKeyDownHandler}
onCompositionStart={() => setComposing(true)}
onCompositionEnd={() => setComposing(false)}
/>;
};
