要求

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)}
         />;
};