[이벤트 함수] button 태그와 onClick/onSubmit (에러핸들링)

프로젝트 중 에러는 아니지만 원하는 기능이 구현되지 않았다.

<button> 태그에 onSubmit 속성을 onClick으로 변경하자 문제가 해결되었다.

 

문제상황 및 해결방안

- 문제상황 : <button> 태그에 onSubmit 속성을 활용하여 이벤트 핸들러를 할당하자, 동작이 안됨

- 해결방안 : onSubmit 속성을 onClick으로 변경

 

// create 요청을 위한 이벤트 핸들러 코드
const addToDoListHandler = (e) => { 
  
  e.preventDefault();
  let data = {
    userId: userId,
    list: ToDoList,
    startTime: ToDoStartTime,
    endTime: ToDoEndTime,
    theme: TodoTheme,
    date: date,
  };
  axios
    .post("https://localhost:5000/todo", data, {
      headers: { "Content-Type": "application/json" },
      withCredentials: true,
    })
    .then((res) => {
      console.log(res);
      changeListHandler();
    })
    .catch((err) => {
      console.log(err);
    });
};

 

{/* 에러 코드 */}
<button type="submit" onSubmit={addToDoListHandler}>
  SUBMIT
</button>

 

{/* 수정 코드 */}
<button type="submit" onClick={addToDoListHandler}>
  SUBMIT
</button>

원인

<button> 태그가 <form> 태그 내부에 있지 않기 때문에 onSubmit 키워드는 사용 불가능

 

설명

1. onSubmit : <form> 태그에서 form 이 submit 되었을 때 발생되는 이벤트 (form 태그에서 사용)

2. onClick : <form> 과 무관하게 클릭시 발생하는 이벤트