[LAB-5] form태그 연결 안됨 이슈 발생

질문 작성자

김서현

문제 상황

input창의 'required'를 사용하기 위해서, form태그로 input, button들을 묶어줘야겠다고 생각했습니다. form태그 사용전까지는 버튼을 클릭하면 데이터가 전송되도록 하는 이벤트를 걸어준 것이 다였습니다.
일차적으로 기본 <form>태그로 Input, InputSelector, DatePicker, Button 컴포넌트를 감싸서 서버 구동해보았으나,
form태그는 작동하지 않고 콘솔창에 'Form submission canceled because the form is not connected' 문구만 뜬채 작동이 되지 않았습니다.
그래서 기본 <form>태그로 컴포넌트를 묶으면 안되는 것인가 싶어, <Form>이라는 컴포넌트를 만든뒤, 그것을 가져다 <Form>컴포넌트로 Input, InputSelector, DatePicker, Button 컴포넌트들을 감싸보았지만, 똑같은 오류가 반복되었습니다.

아래는 현재 Form 컴포넌트로 Input, InputSelector, DatePicker, Button 컴포넌트를 감싼 형태입니다.
아래는 Form 컴포넌트 입니다.
아래는 서버 작동시 오류가 난 콘솔창 입니다.

프로젝트 저장소 URL

https://github.com/React-Project-lab5/React-Project-lab5
develop브랜치

현재 파일 위치

환경 정보

운영체제 : Windows
Node.js : v16.14.0
라이브러리 : React v18.2.0

문제 원인

form 요소의 onSubmit 사용 시 event의 기본 동작을 차단해야 하는데 차단하지 않았습니다. 그러므로 submit 역할 버튼을 사용자가 클릭 했을 때 웹 브라우저는 form 입력 내용을 전송 하려 시도합니다. 하지만 form 요소에 action이 설정되지 않았으므로 전송할 곳을 몰라 다음과 같은 오류가 출력된 것입니다.

Form submission canceled because the form is not connected

문제 해결

form 요소에 연결된 이벤트 리스너에 이벤트 객체의 preventDefault 메서드를 사용해 웹 브라우저의 기본 동작을 차단해보세요.

<Form onSubmit={(e) => {
  e.preventDefault();
  // ...
}}>
  ...
</Form>

yamoo9 / likelion-FEQA