[REACT] onKeyDown

onKeyDown

키보드를 눌렀을 때 발생하는 이벤트

특정 키가 눌렸을 때 그 키에 대한 작업 수행할 수 있도록 돕는 이벤트 핸들러

Enter, Esc 키 등 특정 키에 반응

ex) e.key === "Enter"

Enter 키 눌렀을 때 폼 제출, 입력된 내용을 다른 컴포넌트에 전달

 

예제 코드

import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleButtonClick = () => {
    alert(`You entered: ${inputValue}`);
    setInputValue(""); // 입력 필드를 초기화
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") { // Enter 키가 눌렸을 때만 실행
      handleButtonClick();
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown} // 키보드 입력 감지
        placeholder="Type something and press Enter..."
      />
    </div>
  );
}

export default App;