useState로 Form 데이터 처리 추가

 

function AddPetForm() {
  function handleSubmit(e) {
    e.preventDefault();
    alert("펫 추가 클릭함!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <fieldset>
        <legend>새 PET을 추가하기</legend>
        <input placeholder="이름"></input>
        <input placeholder="종류"></input>
        <input placeholder="나이"></input>
        <button>펫 추가</button>
      </fieldset>
    </form>
  );
}

 

 

form 태그에 onSubmit 실행 시 handleSubmit 함수를 실행하도록 하고 

handleSubmit 함수를 만들어준다.

이 함수는 submit 실행 시 input창에 입력된 내용들을 초기화하면서 서버로 보내는 이벤트를 

중지하고, alert창을 띄우는 함수이다. 

 

 

위와 같이 펫 새로 추가할 동물 내용을 추가하고, 펫 추가를 클릭하면 

input창 내용이 사라지지 않고 alert창을 띄운다. 

 

 

기존에 있던 펫 배열을 useState로 만든다. 

 

팻 배열이 추가되거나 변동이 있으면 

 

리랜더링한다. 

 

일단 테스트로 5마리의 동물의 정보를 초기값으로 넣었다. 

 

 

 

state에 새로운 값을 입력할 때는 setPets라는 함수를 사용해서 넣을거고 

 

만들어 놓은 AddPetForm의 컴포넌트에 setPets함수를 넣는다. 

 

 

그러면 props에 setPets함수가 전달돼서 

submit이벤트가 일어날 때 실행되는 함수에 

setPets을 실행 할 수 있다. 

 

아까 만들어놓은 haldeSubmit함수에 

 

 

 

지금은 setpet함수에 펭수를 추가하게끔 만들어놔서 

어떤 정보를 input에 입력하더라도 

펭수의 정보가 입력된다.

(아래와 같이)

 

 

 

 

 

그래서 이 함수를 수정해서 

input에 입력된 정보로 저장할 수 있도록 수정할 것이다!

 

useState를 사용해서 input창에 입력되는 값들이 onchange 이벤트가 일어나면 

자동변경하도록 한다. 

그리고 각 입력창의 값들을 공백(null)로 바꾼다. 

 

 

그리고 Form에도 

input 태그에 해당 입력창의 값이 바뀔 때 마다 함수를 실행하는데

set으로 각 값을 저장한다.

 

그리고 다 입력하고 펫 추가 버튼을 누르면 

onsubmit 으로  handleSubmit 함수가 실행되고 

input창에 저장되어있는 값을 기존에 있던 객체를 배열 추가한다. 

 

 

테스트

 

입력창에 민둥이라는 1살 강아지를 입력한다. 

펫 추가를 누르면

 

 

민둥이는 추가하고 입력창에 입력했덥 값들은 초기화된다.