[DAY19] React 시작 첫날

import React,{useState} from 'react';


function App() {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  function onChangeId(event){
    const idValue = event.target.value
    setId(idValue)
  }

  function onChangePw(event){
    const pwValue = event.target.value
    setPw(pwValue)
  }

  function onClickSubmit(event){
    console.log(event)
    alert(`입력한 아이디는 '${id}'이며, 비밀번호는 '${pw}'입니다.`)
  //  setId("")
  //  setPw("")
  }

  // const submitForm = document.querySelector('#submit-form');
  //       function handleSubmit(event){
  //           event.preventDefault();
  //           alert(`입력한 아이디는 '${id}'이며, 비밀번호는 '${pw}'입니다.`)
  //           setId("")
  //           setPw("")
  //       }

  //       submitForm.addEventListener("submit", handleSubmit);

  return (
    <form onSubmit={onClickSubmit}>
      <label>아이디 : </label><input type="text" value={id} required onChange={onChangeId}/>
      <label>비밀번호 : </label><input type="password" value={pw} required onChange={onChangePw}/>
      <input type="submit" value="로그인"/>
    </form>
  )
}

export default App;

1. 문제
   html에서 유효성 검사 하는것처럼 하고싶어서 addEventListener 해봤는데 안됨.

2. 시도
   onChange, onClick 둘다 넣어봤음.
   id값도 줘서 해봤는데 안됨.

3. 해결
   onSubmit으로 form 전체에 function을 줬어야함.......

4. 알게된 것
   jsx 문법에서는 addEventListener가 읽히지 않는다.
   onSubmit으로 하면 setId, setPw를 빈값으로 돌려주지 않아도 초기화가 된다.

친구 해답