인프런 커뮤니티 질문&답변
작성한 질문수
이벤트 객체값 확인관련 - console.log
해결된 질문
작성
·
92
0
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핸들러를 통해 값을 확인하는 방법을 설명하고 있습니다.
질문자님의 의문사항에 대한 해결책이 되었기를 바라며, 추가적으로 궁금한 점이 있으시면, 이어서 질문 부탁드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.