useform 추가 데이터

useform으로 값을 넘길 때 register로 등록되지 않은 값을 추가로 넘겨야 할 때도 있다.

• react-hook-form 관련글 : https://minsun309.tistory.com/entry/react-hook-form-useForm

 

userform에서 값을 최종적을 유효성 검사가 성공하면 데이터를 보내는 handleSubmit에 데이터를 인자로 받는 onSubmit함수에 데이터를 보내기 전에 특정 값을 추가해 주면 된다.

 

기본형

<form onSubmit={handleSubmit(onSubmit)} />
 //...
</form>

 

데이터 추가

const taemList = ["청팀", "백팀"];
const [teamTxt, setTeamTxt] = useState("팀을 선택하세요");
const [teamError, setTeamError] = useState(false);
const handleSelectTeam = (team: string) => {
    setTeamTxt(team);
};


return (
	<form
	    onSubmit={handleSubmit((data) => {
	       if (teamTxt === "팀을 선택하세요") {
            setTeamError(true);
         } else {
            data.team = teamTxt;
            onSubmit(data);
         }
	    })}
	>
	//...
	 <ul className="optionList" ref={selectBoxRef}>
      {taemList.map((team) => (
          <li
             className="option"
             key={team}
             onClick={() => {
                 handleSelectTeam(team);
              }}
            >
             {team}
          </li>
       ))}
      </ul>
	</form>
)