[React] 리액트 'Enter' 키 이벤트 enter key event typescript

 

 

input, button으로 구성된 메시지 입력창

 

버튼을 클릭하면 메시지 전송이 되지만,

키보드의 엔터키를 눌렀을 때도 전송이 되게 하기 위해서는,

input의 onKeyPress 속성 사용!

 

자세한 건 아래 코드에서 확인:)

 

import React, { useRef, useState, ChangeEvent, KeyboardEvent } from 'react';

function InputBox() {
  const [text, setText] = useState<string>('');
  const inputRef = useRef<HTMLInputElement>(null);

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const handleMessage = () => {
    if (text === '') {
      return alert('전송할 메시지를 입력해주세요:)');
    }
    // 메시지 전송하는 부분 구현
    // setText(''); // 메시지 전송 후 input 빈값으로 수정
    // inputRef?.current?.focus(); // 메시지 전송 후 input 포커스
  };

  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleMessage();
    }
  };

  return (
    <Container>
      <input
        placeholder="메시지를 입력하세요"
        onChange={onChange}
        value={text}
        ref={inputRef}
        onKeyPress={handleKeyPress}
      />
      <button onClick={handleMessage}>
        <Send /> //메시지 아이콘
      </button>
    </Container>
  );
}

export default InputBox;