부모 구성 요소에서 useForm을 사용하여 자식 구성 요소에서 데이터를 얻으려면 어떻게해야합니까? 내 모든 구성 요소는 반응 후크입니다.
나는 시도했다 :
SignUp.js :
const { register, handleSubmit } = useForm();
const submitHandler = (data) => {
console.log(data);
};
return (
<div style={{ margin: "3rem" }}>
<form onSubmit={handleSubmit(submitHandler)}>
<Form register={register}>
<button type="submit">Sign Up</button>
</form>
</div>
Form.js :
return(
<div>
<input name="username" ref={props.register}/>
</div>
)
그러나 제출 버튼을 클릭 {}하면 콘솔에 빈 개체 가 표시됩니다. 이것이 올바른 방법입니까, 아니면 다른 것을 추가해야합니까?
https://react-hook-form.com/faqssetValue 에서 알게 되었습니다.
SignUp.js :
const { register, handleSubmit, setValue, setError } = useForm();
useEffect(() => {
register({ name: "username" });
register({ name: "first_name" });
register({ name: "last_name" });
}
const submitHandler = (data) => {
console.log(data);
};
return (
<div style={{ margin: "3rem" }}>
<form onSubmit={handleSubmit(submitHandler)}>
<Form setValue={setValue}>
<button type="submit">Sign Up</button>
</form>
</div>
)
Form.js :
return(
<div>
<input
name="username"
onChange={(e) => props.setValue("username", e.target.value)}/>
<input
name="first_name"
onChange={(e) => props.setValue("first_name", e.target.value)}/>
<input
name="last_name"
onChange={(e) => props.setValue("last_name", e.target.value)}/>
</div>
)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다