반응형
Iuput 태그에서 일부분만 마스킹하기
화면을 개발하는 도중 유저의 첫번째 아이디만 제외하고 전부 마스킹을 해달라고 했다.
정확한 오더는 아래와 같다.
- 유저가 입력할 때는 입력하는 내용이 보여야한다.
- 유저가 다른 곳을 클릭하면 첫글자를 제외한 나머지는 마스킹을 해야된다.
- 유저가 아이디를 수정하면 리셋을 해야된다.
위 내용과 같이 코드를 구현하는데, 한번 해두면 두고 두고 쓸 것 같아서 메모를 해둔다.
확실히 리액트는 이것저것 코드들을 좀 정리를 해두어야하는데, 너무 귀찮다.
const [userId, setUserId] = useState('');
const [maskingUserId, setMaskingUserId] = useState('');
const handleChangeUserId = (id) => {
setUserId(id);
setMaskingUserId(id);
};
const onUserIdReset = () => {
setUserId('');
setMaskingUserId('');
};
return (
<div>
<input
type="text"
placeholder="아이디 입력"
onClick={() => {
onUserIdReset();
}}
onBlur={() => {
setMaskingUserId(maskingId?.replace(/(?<=.{1})./gi, '*'));
}}
onChange={(e) => {
handleChangeUserId(e.target.value);
}}
value={maskingUserId}
/>
</div>
);
반응형
'notion > react_info' 카테고리의 다른 글
react input 특정 부분만 마스킹하기 (0) | 2021.02.24 |
---|---|
체크박스 테스트 파일입니다. (0) | 2021.02.07 |
javascript firefox 에서 날짜가 에러가 나는 경우 (0) | 2021.02.04 |
eslint 경로 에러와 절대경로 지정(.eslintimport/no-unresolved) (0) | 2021.01.29 |
댓글0