[React] input에 초점을 맞출 때 Enter 키를 눌러 보내기

하고 싶은 일

input에서 예측 변환 후보가 나타나지 않았을 때 Enter를 누르면submit 함수를 누르십시오

isComposing 사용

keydown 이벤트의 속성에는 isComposing이 있습니다.
전환에서 전환이 끝날 때까지 진짜로 되돌아오기
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.isComposingboolean 반환
Keyboard Event에는 isComposing이 없습니다.부터, "짧은 드라마를 감상할 수 있는 기회라고 생각해요?"1분 동안 패치를 하고 1시간 동안 읽고 초고를 쓴 후에야 네이티브 이벤트의 존재를 발견했다
어리석은 이유로 황금 주간의 소중한 1시간 1분을 낭비했는데...