공군소령김도지
624
2021-07-31 14:32:37
0
66

리액트 form onsubmit에 대한 질문


import React, { useState } from "react";

const Counter = () => {
  const [userValuesetUserValue] = useState({
    nameHuman: "",
    nickname: "",
  });

  const {nameHuman,nickname} = userValue;

//Event Handler
  const btn = (e=> {
    e.preventDefault()
    setUserValue({ 
        ...userValue
        [e.target.name] : e.target.value
    });


  };


  return (
    <div>
      <form onSubmit={btn}>
        <input name="nameHuman"/>
        <input name="nickname"/>
        <input type="submit"/>
      </form>
        <div>{nameHuman}</div>
        <div>{nickname}</div>
    </div>
  );
};

export default Counter;



 [e.target.name] : e.target.value

이 computed properties 부분을 통해 다른 name들을 받아서 각각 따로 state에 저장 할려고 합니다. 

그런데 onSubmit 프로퍼티를 통해서 하면 벨류가 아에 저장이 되지 않습니다. 

return (
    <div>
      <form>
        <input name="nameHuman" onChange={btn}/>
        <input name="nickname"onChange={btn}/>
        <input type="submit"/>
      </form>
        <div>{nameHuman}</div>
        <div>{nickname}</div>
    </div>
  );


그래서 위와 같은 방식으로 onChange를 쓰면 

 [e.target.name] : e.target.value

이부분이 제가 예상하는대로 처리가 됩니다. 


1. onsubmit 프로퍼티로 value값을 넘길때 다른 name별로 벨류가 전송이 안되는 건가요?

2.onsubmit같이 form 전체를 넘기는 건 보통 php 서버에 넘길때 사용한다고 들었습니다. 

리액트 같은 프론트state내에서 이동시킬땐 보통 onchange 쓰시나요?


0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.