[JS] 리액트에서 onFocus, onBlur 에 대해 알아보자

삽질 로그의 삶·2022년 11월 22일
0

자바스크립트

목록 보기
2/3

핵심

개발하다 보니, 기본값이 0인 input 이 있는데,
사용자가 커서를 입력할 때 0을 일일이 지워야 해서 귀찮다고 하길래,
간단하게 만들어 봤다.

전제조건

1) input 창에 터치 또는 클릭 했을 시, 0을 공백으로 초기화 해야 한다.(그래야 안 지움)
2) input 창에서 벗어날 때, 공백상태에서 벗어나면 다시 0으로 원위치 시킨다. (그래야 계산할 때 불필요한 로스 방지)

                <input
                    type="number"
                    id='worker_refresh_daily_hour'
                    name='worker_refresh_daily_hour'
                    value={data.state.worker_refresh_daily_hour}
                    onFocus={(e:any) => data.state.worker_refresh_daily_hour === 0 ? dispatch({name : 'worker_refresh_daily_hour' , value : ''}) : null}
                    onBlur={ (e:any) => data.state.worker_refresh_daily_hour === '' ? dispatch({name : 'worker_refresh_daily_hour' , value : 0}) : null}

                  />

중요한건 클릭 또는 터치했을 시 (onFocus), 벗어났을 시 (onBlur)
상황에 이벤트를 연결해주는 것이다.

dispatch는 사용하시는 것중에 onChange와 비슷하게 응용해서 사용하시면 되겠다.

profile
맨땅에 헤딩하는 개발자입니다

0개의 댓글