728x90
[ 리액트 button 태그 자동으로 클릭되는 현상 막는 법 ]
(이벤트가 두번 실행되는 오류 해결하기)
<BaseSelectorTriggerBtn
type="button"
onClick={() => console.log("test")}
>
1) type="button" 설정
2) onClick={() => console.log("test")}
[ 이유 ]
onClick 이벤트에 함수를 전달하는게 아니라 바로 호출했기 때문에 리액트의 onclick은 렌더링 때 실행된다.
(1)
<button id="btn" onClick={alert("hi")} />
렌더링 될때 (버튼 클릭 전) 이벤트 발생함.
<button id="btn" onClick={() => alert("hi")} />
정상적으로 버튼을 클릭할 때 이벤트 발생함.
(2) 혹은 index.js 파일의 StrictMode 때문일 수 있으니, 위 방법으로 안되면 StrictMode 코드도 지워봐야한다.
728x90
'💎 리액트' 카테고리의 다른 글
리액트 useCallback, useCallback 쓰는 이유 (0) | 2022.03.10 |
---|---|
React input radio default checked 설정(리액트 radio 기본값) (0) | 2022.03.04 |
리액트 useEffect() 사용법 (0) | 2022.03.03 |
리액트 검색기능 구현 (스프링부트, 리액트 연동 쇼핑몰 검색 기능 구현) (0) | 2022.03.03 |
리액트 : 부모 컴포넌트에서 자식 컴포넌트 함수 호출하는 법 (0) | 2022.03.02 |
댓글