자식에서 부모로 스테이트변경

Harry Jung·2023년 7월 20일
0

자식에서 부모로~

  1. 부모에서 함수선언 후 자식으로 내려줌
    Parent.jsx
  const getData = (data) => {
    console.log(data); 
  }
  
<CreatePurchaseOrder child={getData}  />
  1. 부모에서 받은 함수를 사용
    Child.jsx
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])
}

profile
Dreamsoft

1개의 댓글

comment-user-thumbnail
2023년 7월 20일

정말 유익한 글이었습니다.

답글 달기