React 상위 태그 이벤트 전파 중지

Question

form 태그 내부에 아이디 중복 함수를 기능을 구현했습니다. 하지만 상위 이벤트인 submit 함수까지 호출되는 문제가 발생했습니다.중복 체크 함수에 e.stopPropagation() 함수를 사용했는데도 상위 이벤트도 실행됩니다.어떻게 해결하면 좋을까요? <>

// 회원가입 form 데이터 submit 함수 회원 가입 ... 아이디/패스워드

아이디

// 아이디 중복 체크 함수

{supportText.userId}

가입하기 ) }const handleSignupSubmit = async (e : React.FormEvent) => { e.preventDefault(); const options = { headers : { "Content-Type" : "multipart/form-data" } } ... try{ axios.post(`${API}/dev/23`, formData, options) } catch(e : unknown){ if(e instanceof Error) console.log(e.message) } }const checkUserIdExist = async (e : React.MouseEvent) => { e.stopPropagation(); try{ const {data, status} : any = await axios.get(`${API}/dev/idcheck`,{ params : {userId : form.userId}, }) if(status === 200){ data === 0 ? alert("가입 가능합니다.") : alert("가입이 불가합니다.") } } catch(e : unknown){ if(e instanceof Error) console.log(e.message) } }

Gear · Accepted Answer

클릭 이벤트가 전파되어서 생긴 문제가 아니고, type이 지정되지 않은 버튼은 form 내부에 있을 시 submit 동작을 기본적으로 합니다.아마 Button 컴포넌트 내부는 button 태그가 있고, 거기에 스타일링을 한게 아닐까 싶습니다type을 button으로 지정해보세요

하얀뼈 · Answer

Button컴포넌트를 봐야할듯

oky · Answer

e.stopPropagation(); => e.preventDefault();서브밋 안 되게 해 주세요.

React 상위 태그 이벤트 전파 중지

3개의 답변

Q&A 목록