React - form

기본 설정

• label for속성을 htmlFor로 변경
• input value속성을 defaultValue로 변경
• 닫기 태그 '/' 삽입 필수

const App = () => {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="fname">First name:</label><br/>
      <input type="text" id="fname" name="fname" defaultValue="John"/><br/>
      <label htmlFor="lname">Last name:</label><br/>
      <input type="text" id="lname" name="lname" defaultValue="Doe"/><br/><br/>
      <input type="submit" value="Submit"/>
    </form> 
  );
};

const handleSubmit = (event) => {
  // 타겟의 객체구조를 보고싶을 땐 console.dir
  console.dir(event.target)

  // 타겟의 elements에서 input id로 해당 요소의 값을 가져올 수 있다.
  console.log(event.target.elements.fname.value)
  console.log(event.target.elements.lname.value)

  // form submit 새로고침 막기
  event.preventDefault();
}