Enter 키를 누르면 Input에 작성한 메시지가 전송되는 채팅방 기능을 구현하다가 오류를 맞닥뜨렸다.

에러 코드

const handleOnKeyPress = e => {
  if (e.key === "Enter") {
    e.preventDefault();
    handlePostMessage(); // 이벤트 객체 전달
  }
};

원인

• handlePostMessage 함수가 이벤트 객체를 제대로 전달받지 못해서 발생하는 현상.
• 이벤트 객체의 preventDefault 메서드를 호출할 때 undefined가 되어 오류가 발생.

수정

   // 메시지 등록하기
  const handlePostMessage = e => {
    e.preventDefault();
    const currentTime = getCurrentTime();
    // 시간과 함께 메시지 생성
    const newMessage = { content, uploadedImage, time: currentTime };
    setMessages(prevMessages => [...prevMessages, newMessage]);
    setContent("");
    setUploadedImage(null);
    console.log("메시지가 전송되었습니다.", content);
  };

  // Enter 키 이벤트
  const handleOnKeyPress = e => {
    if (e.key === "Enter") {
      e.preventDefault();
      handlePostMessage(e);
    }
  };

참고 : KeyPress 이벤트 함수 만들기