[문제...] react-hook-form, 엔터치면 뮤테이션이 날아감

 

 태그 컴포넌트를 가져와서 붙였는데, 태그를 입력하고 엔터칠 때마다 이 오류창이 떴다.

근데 다른 input창에서도 그랬던 것 같아서 엔터를 쳐보니까 역시나 오류가 떴음.

 

네트워크탭에서 보면 

 

mutation이 요청되어 있다.

 

아무리 생각해도 의심스러운건 form 뿐.....

enter를 치면 자동으로 submit이 되는 거 아닌가하고 독스를 찾아봤는데 "enter"키워드로만 찾아서 그런가? 그런 내용은 없었다... 

 

알고보니 HTML에선 submit 태그 고유동작 중에 하나라고 한다.

const checkKeyDown = (e) => {
    if (e.code === "Enter") e.preventDefault();
  };
  
  ...
  
  <form
          onSubmit={
            isEdit
              ? handleSubmit(props.onClickUpdate)
              : handleSubmit(props.onClickSubmit)
          }
          onKeyDown={(e) => checkKeyDown(e)}
        >

출처 : https://www.codegrepper.com/code-examples/javascript/disable+key+enter+react-hook-form

 

checkKeyDown 함수를 만들고

form onSubmit 병렬로 onKeyDown 설정을 해주면 enter 쳐도 submit이 날아가지 않는다.

 

근데 문제는,.,,?

 

태그 부분에도 엔터가 안 먹음ㅋㅋㅠㅠ

checkKeyDown에서 enter키를 눌렀을 때 고유동작을 막아버리기 때문...인듯

 

그럼 ... button을 submit이 아니라 그냥 button으로 만들어줘야한다는건가???? 근데 그러면 자동으로 data를 보내주는 건 어떻게 ...? 

 

 해봤는데 실패했음... 

그래서! 태그에만 예외를 적용해주기로 했다.

 

 함수에 들어오는 e를 찍어서 target을 보고 id 있는지 확인확인!

 

   <S.InputBox
            id="tag"
            placeholder="아무거나 써주세요!"
            onChange={(e) => props.addTag(e)}
            onKeyPress={(e) => props.handleKeyPress(e)}
            value={props.tag}
          />

태그 넣는 input에 id="tag"를 넣어주고 

 const checkKeyDown = (e) => {
    console.log(e);
    if (e.target.id === "tag") return;
    if (e.code === "Enter") e.preventDefault();
  };

e.target.id가 tag일 땐 return...!

엔터 누를 때마다 함수가 실행되긴 하지만, 그래도 태그 넣는 정도야... 괜찮지 않나?,,,

나,,, 천재가 아닐까! 라는 생각이 들면 부정하지 않도록 한다. 이럴때라도 칭찬을 해줘야해,,,, 😗

 

근데!!!!!!!!!!!!!또 .... 또 오류창 뜨네... 왜지ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅎ ㅏ~~~

이럴거면 첨부터 되지 말ㄹ든가 사람을 들었다놨다하네

 

 

  const checkKeyDown = (e) => {
    console.log(e);
    if (e.target.id === "tag") return;
    else if (e.code === "Enter") e.preventDefault();
  };

일단 else if로 바꾸니까 되는데.............