[React] react <input type="button"> 또는 <button> 클릭 시 disable로 속성 변경하기, 버튼 클릭하면 못쓰게 하기

react로 회원가입 폼을 만드는 도중 아이디 중복검사를 하고나면 버튼을 클릭하지 못하게 만들고 싶었다.

근데 블로그에 기록 남기려고 하면서 생각해보니까 중복검사는 여러번할 수 있도록 해줘야할 것 같단 생각이 드는 밤이다...

 

아무튼 나중에되면 기억 못할 것 같으니 글로 남길테얍

 

리액트는 이제 막 배워서 처음 써보는 거라 아래 코드가 어떤 논리적인 문제나 오류가 생길지 나도 모름...^^

무책임하군

 

암튼 고고링

---

이렇게 버튼이 하나 있다. 얘를 한번 클릭하면 두번 못누르게 변경하고 싶었다.

결과부터 보고가자

버튼 처음에 누르면 클릭된건지 확인부터 하고

alret창을 끄고나면 이렇게 클릭하지 못하게 바뀜

---

코드

<button disabled=""  onClick={(e)=>{
	e.preventDefault();
	alert('클릭된다잉');
	e.currentTarget.disabled = true ;
}}>함수 확인 용</button>

이게 끝임...

처음 태그에는 disabled=""로 해놔야함 (false로 해놔도 안되더라...)

 

e.preventDefault();    ← 얘야 기존 버튼클릭 시 일어나는 기본이벤트 막아주는 코드인데 하도 많이 나오니까 아실꺼고

 

e.currentTarget.disabled = true ;    ← disable속성이 button event어디에 붙어있나 찾아봤더니

event의 currentTarget안에 disable="" 요렇게 기다리고 있더라.

그래서 쟤를 직접 바꿔버림

 

다른 블로그보니까 얘를 const {disable} = ? : 어쩌고 저쩌고 해놨던데

머리가 아파서 나쁜 코딩을 해버렸다...