input box에 입력한 값은 2가지 종류가 있습니다.
하나는 '입력 된 전체 텍스트'이고,
하나는 '입력 된 단일 값'입니다.
- 입력 된 전체 텍스트 추출 -
입력 된 전체 텍스트는,
'OnChange'이벤트 핸들러의 event객체를 이용하여 추출합니다.
event.target.value값을 확인하면 됩니다.
- 입력 된 단일 값 추출 -
입력 된 단일 값은,
'onKeyDown(up도 가능)'이벤트 핸들러의 event객체를 이용하여 추출합니다.
event.key값을 확인하면 됩니다.
- 관련 내용 소스코드 -
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<label htmlFor="onChange">텍스트 전체 감지↓</label>
<input
id={'onChange'}
onChange={(event) => {
console.log('텍스트 전체 감지', event.target.value);
}}
></input>
<label htmlFor="onKeyDown">입력 단일값 감지↓</label>
<input
id={'onKeyDown'}
onKeyDown={(event) => {
console.log('입력 단일값 감지', event.key);
}}
></input>
|
cs |
- 브라우저에서의 구동 -
'웹개발자공부 > React' 카테고리의 다른 글
| React - side effect 실행 필요 시점 별 useEffect 정리 (2) | 2022.12.29 |
|---|