[React.js] input 입력 값 가져오기(SyntheticBaseEvent)

function App() {
      const [minutes, setMinutes] = React.useState();
      const [hours, setHours] = React.useState();
      const onChange = (e) => {
        console.log(e);
        console.log(e.target.value);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            onChange={onChange}
            value={minutes}
            id="minutes"
            placeholder="Minutes"
            type="number"
          />
        </div>
      );
    }

handler 이벤트를 발생시킨 후 인자에 매개변수를 실어 콘솔로그를 찍어보면

아래와 같은 객체가 출력된다.

리액트가 가짜 이벤트를 발생시키는 것인데, 자세히 보면

target에 내가 접근한 태그가 있고

target.value에 내가 작성한 값이 나와있다.

 

이런 방식으로 input 등에 입력된 값을 가져 올 수 있다.