Textarea 엔터키로 submit(fetch요청)하기 (React-Typescript)

커스텀 훅

interface IProps {
  handleSubmit: (
    e:
      | React.FormEvent<HTMLFormElement>
      | React.KeyboardEvent<HTMLTextAreaElement>
  ) => void;
  isSubmitting: boolean;
}

function usePressEnterFetch({ handleSubmit, isSubmitting }: IProps) {
  const handlePressEnterFetch = (
    e: React.KeyboardEvent<HTMLTextAreaElement>
  ) => {
    if (e.key === "Enter" && !e.shiftKey && !isSubmitting) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  return { handlePressEnterFetch };
}

export default usePressEnterFetch;

쓰는 곳

  const { handlePressEnterFetch } = usePressEnterFetch({ handleSubmit });
  //...

        <textarea
          placeholder="내용을 입력해주세요..."
          name="content"
          value={inputValues.content}
          className={styles.textarea}
          onChange={onChange}
          // onKeyDown속성에 전달!!
          onKeyDown={handlePressEnterFetch}
        />

참고!! form태그의 onSubmit에는 원래의 handleSubmit함수를 전달해주어야 한다.