[짜잘한 react] Input value값

오늘의 주제
1. react에서 input 값 받아오기

1. React에서 input 값 받아오기

• useState 사용
• onChange에 함수를 이벤트 객체 e를 파라미터로 받아와 사용
• e.target은 이벤트가 발생한 DOM인 inputDOM을 가르키게 됨
• DOM의 value값, 즉 e.target.value를 조회하면 현재 Input에 입력한 값이 무엇인지 알 수 있음
• useState를 통해 관리해주해주면 됨

+++ e.preventDefault 꼭해주기! ( 새로고침 방지 )

import React, { useState } from 'react';

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

  const onChange = (e) => {
  	 e.preventDefault
    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;