이벤트 객체값 확인관련 - console.log
onChange 이벤트에서 입력값 확인을 console.log에서
확인시 아래와 같이 확인이 되어집니다.
input(type=date포함), textarea
궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야
할까요? 실제 target부분에 아래와 같이 표시가 되어집니다.
select와 option의 값이 출력이 되고
input의 입력값을 볼수있는 형태가 아닌
select tag에서 정의한 값이 보입니다.
실제 선택한 값을 어디서 확인할 수 있을까요?
답변 2
0
안녕하세요 이정환입니다.
input, select에 사용자가 현재 입력한 값은 onChange이벤트 핸들러에 매개변수로 전달되는 이벤트 객체의 target.value 프로퍼티에 들어가 있습니다. 정리하자면 이벤트 핸들러에서 e.target.value로 해당 값을 꺼내 사용하실 수 있습니다.
아래 AI 인턴의 예제를 참고해보세요
0
안녕하세요, 인프런 AI 인턴입니다. wonyongick님께서 질문하신 내용을 바탕으로 답변드리겠습니다.
React에서 <select> 태그와 연결된 값(즉, 사용자가 선택한 옵션)을 확인하기 위해서는 onChange 이벤트 핸들러를 사용해야 합니다. 이 이벤트는 사용자가 다른 옵션을 선택했을 때 발생하며, 해당 이벤트 객체의 target 속성을 이용해 현재 선택된 값을 얻을 수 있습니다.
구체적으로, onChange 핸들러를 아래와 같이 작성하여 선택된 값을 console.log로 확인할 수 있습니다:
<select onChange={(e) => console.log(e.target.value)}>
<option value="옵션1">옵션1</option>
<option value="옵션2">옵션2</option>
<option value="옵션3">옵션3</option>
</select>
위 코드에서 e.target.value는 사용자가 선택한 옵션의 value 속성을 반환합니다. 즉, value="옵션1"으로 설정한 경우, 이 값이 출력됩니다.
관련된 더 자세한 설명과 예제를 아래 기존 질문들에서 찾아보실 수 있습니다:
- 23:05 select의 value={value} 질문입니다. - 이 질문에서는
select태그와value속성을 어떻게 사용하는지에 대해 논의하고,onChange핸들러를 통해 값을 확인하는 방법을 설명하고 있습니다.
질문자님의 의문사항에 대한 해결책이 되었기를 바라며, 추가적으로 궁금한 점이 있으시면, 이어서 질문 부탁드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
VSCode 설정 문의
0
31
2
PPT 코드 관련 질문
0
24
2
useEffect와 lifecycle문의
0
38
2
프론트엔드 학습 수준 문의
0
57
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
56
2
데이터 로딩중 화면만 계속 나와요!!
0
57
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
86
2
이후의 커리큘럼 문의
0
105
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
54
2
최적화 관련 질문있습니다 (useMemo 등)
0
87
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
83
3
Date 객체에 관련하여 질문드립니다.
0
88
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
79
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
113
2
onMouseEnter 관련 문의 드립니다
0
94
3
배열의 렌더링 관련 질문 드립니다.
0
74
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
118
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
141
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
124
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
191
2
87강 필터 함수 질문
0
71
2
useRef, useState count 비교
0
67
2