Enter 키를 누를 때마다 React에서 작업을 수행합니다.

얼마 전, 사용자가 Material UI TextField 에서 enter 키를 눌렀을 때, 나는 포획 이벤트를 포함하는 기능을 React 페이지에 추가하고 싶었다.물론 이 이벤트들은 다른 요소에도 적용될 수 있지만, 나 때문에 코드 세션에서 사용할 것이다. TextField행동을 취하기 위해 Button 를 설정했지만, enter 키를 눌렀을 때 같은 행동을 하고 싶습니다. 이것은 상당히 흔한 웹 응용 프로그램 행위입니다.

<Button
  variant="contained"
  onClick={(e) => doSomething(e)}
>
  This button does something
</Button>

doSomething 함수는 기대하는 공유 행위이다.TextField를 위해 같은 물건을 설치하는 것이 생각보다 쉽다.

<TextField
  onKeyDown={(e) => (
    e.keyCode === 13 ? doSomething(e) : null
  )}
/>

지금 나는 클릭Button과 같은 행동을 받았다.onKeyDown 이벤트 포획 키보드 입력keyCode의13는 사용자가 enter 키를 눌렀음을 나타낸다.더 알고 싶은 사람이 있다면 키코드on the MDN Web Docs에 대한 정보가 더 많습니다.특히 이는 이용자 관심TextField 때만 유효하다.물론 이것은 내가 원하는 결과이지만, 이것은 여전히 주의해야 할 것이다.