[React] Input에서 패스워드 사용할 때 눈표시 제어하는 법(antd)

# 배경

주민등록번호 뒤자리를 *(별)표시로 해놓은 걸 풀어서 볼 때마다 이력을 남겨야했다.

그래서 눈을 클릭했을 때 API를 호출하고 싶었다. 그리고 눈이 풀렸을 때 눈을 빨간색으로 하고 싶었다.

몇 달이 지나고 Input에 disabled가 ture일때도 눈이 풀려야했다. 

눈을 제어하는 방법을 찾아봤다.

 

# 눈 제어 부분을 찾기

  <Input.Password
         style={{width: 200}}
         iconRender={(visible)=>
            visible ? <EyeOutlined/> : <EyeInvisibleOutlined/>
            }
   />

visible이 ture 일 때 눈이 열리고  false 일 때 눈이 닫힌다.

 

# visible이 ture 일 때 눈 색 변경

- 파고 파고 파서 옵션을 알아냈다.

twoToneColor=""

- 눈이 열렸을 때 빨간색으로 변경하고 싶다.

<EyeTwoTone
  twoToneColor="red"
/>

 

# 눈을 클릭할 때 함수를 호출하기

- 눈을 클릭할 때마다 API 호출하는 함수를 타고 싶다

- 클릭할 때마다 작동된다.

 onClickCapture={}

예시

 onClickCapture={() => {inquiryRegistrationNo();}}

 

# disabled일 때 눈을 제어해서 안에 내용보기

- disabled 설정을 해놓으면 눈을 아무리 눌러도 작동하지 않는다.

- 옵션을 이용해야한다. 

visibilityToggle={}

 

예시

  visibilityToggle={{ visible: true }}

 

# 전체 코드

  const [disabled, setDisabled] = useState(false);
  const [openRegNum, setOpenRegNum] = useState(false);
  
  <Input.Password
                      disabled={disabled}
                      visibilityToggle={{ visible: openRegNum }}
                      iconRender={(visible) => {
                        return visible ? (
                          <EyeTwoTone
                            twoToneColor="red"
                            onClickCapture={() => {
                              setOpenRegNum(false);
                            }}
                          />
                        ) : (
                          <EyeInvisibleOutlined
                            onClickCapture={() => {
                              setOpenRegNum(true);
                              inquiryRegistrationNo();
                            }}
                          />
                        );
                      }}
                    />

disabled 값 상관없이 처음 눈을 누르면 openRegNum가 ture가 되면서 글자가 공개되면서 함수를 호출된다. 그리고 눈을 빨간색으로 변경된다.

그 다음은 눈을 닫으려고 누르면 openRegNum가 false가 되면서 글자가 비공개된다.

 

 

 

 

있는 정보로 안을 타고 타고 들어가니까 기능들이 다 있었다.

끝!