如何使用函数将值从子组件传递到父组件？答案

【问题标题】：How do i pass a value from child component to parent component using function?如何使用函数将值从子组件传递到父组件？
【发布时间】：2020-12-07 01:57:56
【问题描述】：

如何将验证值从子组件传递给父组件？我尝试使用道具，但没有用。我试图传递“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'，宽度：'20rem'，高度：45，字体大小：22，背景颜色：'#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>

)}

谢谢

【问题讨论】：

你能展示每个组件的完整代码吗？只用目前附上的代码提供帮助并不容易。

标签： javascript reactjs

【解决方案1】：

您的示例代码似乎缺少一些关键行来具体回答问题。

但是，一般来说，如果是 Parent 应该知道的数据，但孩子会使用，它应该是 parent 中的 state 值，然后作为 props 传递给孩子。这是一个使用功能组件的非常小的示例：

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} />
}

【讨论】：

我已经更新了上面的代码，但我不明白'return ' 和 return '' 部分。我应该将 isvalidvalue 条件放在 useEffect 的什么位置？

【解决方案2】：

您可以保存父级的值并传递一个函数以将其更改给您的子级。我无法用您发布的代码向您展示这一点，但我可以展示一个示例来说明我的意思。父级有一个带有更新函数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>
}

【讨论】：

但是我把验证函数（isValidValue）放在子组件上。我可以在子组件上执行状态函数“ const [isValid, setIsValid] = useState(false); ”，然后在父组件中调用它吗？
不，您必须将函数从父级传递给子级。您不能在子级上创建它并将其传递回父级。