[JavaScript] Input tag 의 onchange event 시 Event.target 사용하기

Yuri Lee·2021년 7월 22일
0

배경

  • input tag 에서 입력한 값으로 변하게 하는 방법을 알고 싶었다.

방법

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;
  • input 의 onChange 라는 이벤트를 사용한다.
  • 이벤트에 등록하는 함수에서는 이벤트 객체 e 를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르키게 된다.
  • 이 DOM 의 value 값, 즉 e.target.value 를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있다.


https://developer.mozilla.org/ko/docs/Web/API/Event/target
https://react.vlpt.us/basic/08-manage-input.html

profile
Step by step goes a long way ✨

0개의 댓글