如何使用 function 將值從子組件傳遞到父組件？

Question

如何將驗證值從子組件傳遞到父組件？ 我嘗試使用道具，但沒有用。 我試圖傳遞“isValidValue”狀態

子組件：

    function MilikSendiri({isValidValue}) {
  const { register, handleSubmit } = useForm()

    function sweetAlertclick(){
      Swal.fire({
          icon: 'success',
          title: 'Data anda sudah tersimpan ',
        })
  }    
    return (
  <Formik 
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={onSubmit}
          // validateOnMount
          > 
          {
            formik => {
              const isValidValue = formik.isValid? ("Data Completed") : ("DData incomplete");
            return(
        <div>
            <div>
              Status : {isValidValue}
            <label htmlFor="luasTanah"> Luas Tanah </label>
            <Field className="formBiodata"
            type="text" id="outlined-basic" 
            placeholder="luasTanah"
            fullWidth
            id="luasTanah"
            name="luasTanah"
            margin="normal" variant="outlined"
            />
            <ErrorMessage name='luasTanah' component={TextError}/>
            </div>

                    <div>
              <label htmlFor="BiayaPBB"> Biaya PBB </label>
              <Field className="formBiodata"
              type="text" id="outlined-basic" 
              placeholder="BiayaPBB"
              fullWidth
              id="BiayaPBB"
              name="BiayaPBB"
              margin="normal" variant="outlined"
              />
              <ErrorMessage name='BiayaPBB' component={TextError}/>
              </div>




    <Button  onClick={sweetAlertclick} type ="submit" 
variant="contained" startIcon={<SaveIcon />} color="primary" style={{ 

marginLeft: '25rem', marginTop: '20px', width: '20rem', height: 45, fontSize: 22, backgroundColor: '#22689F'}} disabled={.formik.isDirty && !formik.isValid} >Simpan

        </div>
      )
      }
    }

    </Formik>

) }

父組件：

function UKTRumah ({isValidValue}) {
return (
    <Formik 
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={onSubmit}
    // validateOnMount
    > 
    {
        formik => {
            console.log('Formik props', formik)
            return( 
               
    <div className ="IsiBiodata"> 
  <Accordion square expanded={expanded === 'panel1'} onChange=. 
{handleChange('panel1')} style={{marginLeft: '15rem', marginRight: 
'15rem', marginTop: '3rem'}}>
    <AccordionSummary aria-controls="panel1d-content" id="panel1d- 
header">
    <PersonIcon/>
     <Typography>  Data Rumah</Typography>
     <Typography}> { isValidValue }
    </Typography>
    </AccordionSummary>
    <AccordionDetails>
    <div className ="IsiBiodata"> 
 <Form>
 </div>
    </Form>
    </div>
    </AccordionDetails>
  </Accordion>
            </div>
        
        )}}
           </Formik>

)}

謝謝

Answer 1

您的示例代碼似乎缺少一些關鍵行來具體回答問題。

但是一般如果是Parent應該知道，但是child會用到的數據，在parent中應該是一個state的值，然后作為props交給child。 這是一個使用功能組件的非常小的例子：

const Child = ({ formik, setIsValid, isValid }) => {
  useEffect(() => {
    setIsValid(formik.isValid)
  }, [formik.isValid]);

  return <input />;
}

const Parent = () => {
  const [isValid, setIsValid] = useState(true);

  return <Child isValid={isValid} setIsValid={setIsValid} />
}

Answer 2

您可以保留您父母的價值並通過 function 將其更改為您的孩子。 我無法用您發布的代碼真正向您展示這一點，但我可以展示我的意思的一個例子。 父母有一個 state 更新 function setIsValid並將其傳遞給孩子。 子級可以調用setIsValid ，這將更新父級的 isValid 值。

父母

function Parent() {
    const [isValid, setIsValid] = useState(false);

    return <div>
        <Child setIsValid={setIsValid} />
        IsValid {isValid}
    </div>
}

孩子

function Child({ setIsValid }) {
    return <button onClick={() => setIsValid(true)}>Set Valid</button>
}