如何使用 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>
}