Form submission canceled because the form is not connected: 리액트 form 하나에 button 2개 있을때, 엔터키로 submit이 안되는 현상

HTML 카테고리에 넣으려 했는데, 생각해보니 HTML로 이런 오류를 만나진 않을 것 같고 나도 리액트하다가 마주친 오류이기 때문에

리액트 카테고리에 작성함

---

 

타입스크립트를 연습하면서 todolist를 만드는 도중, 엔터키를 쳤을때 form에서 submit이 안되는 현상이 있었다.

오류

form하나에 button이 2개인데, button의 타입을 명시하지 않았기 때문

내 리액트 tsx 코드는 이렇다.

const AddNewModal: React.FC<Props> = ({ onClick, newTodo, setNewTodo, addNewTodo }) => {
  ..(생략)..

  return (
    <form onSubmit={(e) => submitFunction(e)}>
      <button onClick={onClick}>나가기</button>
      <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}></input>
      <button type="submit">할 일 추가</button>
    </form>
  );
};

submit이 안되었던 이유는 '나가기'버튼의 type이 정해져 있지 않아, form태그 내부에서의 기본값인 submit으로 되어있었기 때문이다.

 

아래 참고자료 두글을 보고 아래와 같이 바꾸니 해결되었다.

해결책 1 : button 의 type을 명시하기

나가기 버튼의 type은 button,

할 일 추가 버튼의 type은 submit

명시하기

  return (
    <form onSubmit={(e) => submitFunction(e)}>

      <button type="button" onClick={onClick}>
        나가기
      </button>
      
      <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}></input>

      <button type="submit">할 일 추가</button>
    </form>
  );

 

해결책2 : form태그 1개에 button 1개만 넣어주기

또다른 방법으로 아래처럼 form 태그 1개에 button 1개만 넣어주는 방법도 있다.

return (
    <>
      <form onSubmit={(e) => submitFunction(e)}>
        <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)}></input>
        <button>할 일 추가</button>
      </form>
      <button onClick={onClick}>나가기</button>
    </>
  );

 

결과

submit이 잘 된다.

 

 

---

참고자료 

http://tcpschool.com/html-tag-attrs/button-type

https://blog.jssim.org/riaegteu-formeseo-form-submission-canceled-because-the-form-is-not-connected-oryu-naneungeo-haegyeol-bangbeob/