react onkeydown에서 preventDefault 에러

 

사용자가 enter 입력했을 때 form submit하는 함수를 호출하는데

preventDefault 부분에서 계속 에러 발생...

해결책을 생각해보았다.

 

1. 로그인 버튼을 클릭했을 때는 오류 없음, 엔터 눌렀을 때만 오류 발생

2. 엔터 누르고 console.log 이벤트 찍어봄 -> undefined

3. 넘어오는 이벤트가 없는 것으로 추정.. -> 함수호출 할 때 이벤트도 같이 넘겨준다면..?

4. 해결 !!!!!!! 

  const onSubmitHandler = (e) => {
    e.preventDefault()

    axios({
      method: "POST",
      url: "http://115.85.180.7:8000/auth/login/",
      data: {
        username: id,
        userpass: pw,
      },
    })
      .then((res) => {
        // console.dir(res.data);
        if (res.data.result === "True") {
          alert(`${id}님 안녕하세요!`);
          // navigate('/')
        } else {
          alert(`아이디 또는 비밀번호를 확인해주세요`);
        }
      })
      .catch(function (err) {
        console.log(err);
      });
  };

  const onKeyDown = (e) => {
    if (e.key === "Enter") {
      onSubmitHandler(e);   // 이벤트도 같이 넘겨주기
    }
  };

 

        <input
          className="styleInput"
          type="password"
          placeholder="비밀번호"
          value={pw}
          onChange={onPwHandler}
          onKeyDown={onKeyDown}
          required
        />