자식에서 부모로~
const getData = (data) => {
console.log(data);
}
<CreatePurchaseOrder child={getData} />
function CreatePurchaseOrder({child}) {}
const onPress = () => {
child("Data Data");
}
-- 부모에서 버튼을 누르면 자식의 정보를 가져오게 하는 방법
1. parent에서 버튼을 만들고 버튼을 누르면 setSubmitReqeusted(true)를 입력한다.
2. setSubmitRequested가 수정되며 렌더링이 되며 child component에서 useEffect기 살행됨
3. useForm에 있는 input정보를 handleFormSubmit(value)를 parent로 data인자로 넘겨준다.
4. console.log로 data를 확인이 가능하며, setSubmitRequested를 false로 다시 바꿔준다.
Parent.jsx
1. onSumbit =()=> {setSubmitRequested(true);}
2. const [submitRequested, setSubmitRequested] = useState(false);
3. const handleFormSubmit = (data) => {
console.log("datafrom Child---", data)
setSubmitRequested(false);
return (..
<PurchaseOrderComponent
handleFormSubmit={handleFormSubmit}
submitRequested={submitRequested} />
Child.jsx
function child({submitReqeusted, handleFormSubmit}){
... {register, getValues} = useForm(..)
useEffect(()=>{
const init = () => {
if(submitRequested){
const value = getValues()
handleFormSubmit(value)
}
}
init();
}, [submitRequested, handleFormSubmit])
}
정말 유익한 글이었습니다.