submit 버튼이 아닌데 submit 되는 버그

아래와 같이 폼의 모든 필드가 채워졌을때 [이전] 버튼 눌러서 이동한 뒤에 [다음] 을 누르면 제출이 이루어진다.

[완료] 버튼을 눌렀을때만 제출이 되어야한다.

(현재는 제출 버튼 클릭 이벤트에 콘솔 출력을 임시로 연결해둔 상황)

 

[다음] 버튼은 type="button"으로 되어있고, [완료] 버튼만 submit으로 되어있는데 왜 이런 문제가 발생하는 걸까?

---

대략적인 페이지구조는 이렇게 되어있다.

 

<FormProvider>    ---리액트 훅 폼 사용
<form>

isAccountPart ? <AccountSection/> : <InfoSection/> --- 상태에 따라 조건부 렌더링으로, 두 단계로 나눠 폼 작성

<button>이전</button>
isAccountPart ? <button>다음</button> : <button>제출</button>  

</form>
</FormProvider>

 

form 안에 버튼이 2개 있어서 그런가? 

=> [이전] 버튼을 form 바깥으로 빼도 동일한 현상 발생

 

[완료] 버튼 type="submit" 주석처리하면 문제는 발생하지 않지만 당연히 제출이 되지않음 ^ ^

그렇다면 [다음] 버튼을 눌렀을때 [완료] 버튼이 트리거 된다는것인데 왜그럴까???

 

  const onSubmit: SubmitHandler<User.FormValue> = (data) => {
    if (!isAccountPart) console.log(data);
  };

이런식으로 if문을 달아봐도 해결되지 않는다

 

---

<해결>

const [part, setPart] = useState<"account" | "info">("account");
...

<Button
  disabled={disabled}
  onClick={(e) => {
    setPart("info");
    e.preventDefault(); // 추가된 부분 !
  }}
>
  다음
</Button>

버튼 클릭 이벤트에 브라우저 기본 동작을 방지하는 e.preventDefault()를 추가했더니 해결됐다.

 

type="submit"이 아니고 "button"인데 왜 이게 필요한거지??