HTML form 태그 안에 submit 버튼을 여러 개 사용하여 동작을 다르게 하기 (with. React Hook Form)

여러 화면에서 값을 입력하고, 한 번에 서버로 데이터를 요청해야 하는 상황이 발생했다.

그래서 이전 버튼을 클릭했을 때와 저장 버튼을 클릭했을 때,  입력한 값을 가지고 페이지 이동 또는 서버 요청이 필요했다.

 

그래서 나는 페이지 이동 시마다 Form Data를 가져와 전역 상태에 넣어 관리해 주는 방식을 생각했고,

이 때 프로젝트에서 사용하고 있는 React Hook Form의 onSubmit을 통해 데이터를 가져오는 방식이 베스트 였다.

 

그러나 이렇게 되면 하나의 form태그에 submit 버튼 두개가 되어 이를 구분해서 처리하는 방법이 필요했다.

이후, submit도 이벤트라는 것에 초점을 맞추어 찾아보니, 해답을 찾을 수 있었다.

 

그 해답은,

form태그에서 Submit 이벤트가 발생했을 때 submitter를 통해 클릭한 submit element를 가져온다.

 

이후, 각 동작을 구분해서 처리하기 위해 submit 버튼에 name을 주어 동작을 분기했다.

 

const Component = () => {
	const formId = "signupForm";
    
	const onSubmit = (data, event: React.BaseSyntheticEvent<object, any, any> | undefined) => {
            if (!(event?.nativeEvent instanceof SubmitEvent)) return;
            const submitter = event?.nativeEvent?.submitter as HTMLButtonElement;
            if (!(submitter instanceof HTMLInputElement)) return;
            if (!submitter.name) return;

            if(submitter.name === "PREV") {
                // ... 이전을 클릭했을 때의 처리
            } else if (submitter.name === "SUBMIT") {
                // ... 저장을 클릭했을 때의 처리
            }
	}


    return (
      <form onSubmit={methods.handleSubmit(onSubmit, onError)} id={formId}>
          // ...
          <input type="submit" form={formId} value="이전" name="PREV" />
          <input type="submit" form={formId} value="저장" name="SUBMIT" />
      </form>
    )
}