React Formik вставляет форму formik в родительскую форму formik

в настоящее время у меня есть родительский компонент и дочерний компонент Dialog с другой формой formik, краткая структура которой выглядит так

<Formik initialValues={...} onSubmit={...}>
  //some form fields here
  <Button type="submit" />
  <Button onClick={()=>{setDialogOpen(true)}}/>
  <Dialog Open={dialogOpen}>
</Formik>

<Dialog>
  <Formik initialValues={...} onSubmit={...}>
    //some form fields here
    <Button type="submit" />
  </Formik>
</Dialog>

По какой-то причине я не могу вывести Dialog из родительского formik, проблема в том, что когда я нажимаю кнопку отправки детей, также срабатывает родительская форма formik, как я могу этого избежать?


reactjs javascript formik formik-material-ui
person highgengen    schedule 13.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы подумал, что событие кнопки отправки всплывает на верхнюю форму. Если вы используете хук formik useFormik, вы можете иметь две отдельные формы и вызывать submit для каждой кнопки:

import { useFormik } from 'formik';
const [parentForm] = useFormik();
const [dialogForm] = useFormik();

<Formik initialValues={...} onSubmit={...} form={parentForm}>
  //some form fields here
  <Button onClick={() => parentForm.submit()} />
  <Button onClick={()=>{setDialogOpen(true)}}/>
  <Dialog Open={dialogOpen}>
</Formik>

<Dialog>
  <Formik initialValues={...} onSubmit={...} form={dialogForm}>
    //some form fields here
    <Button onClick={() => dialogForm.submit()} />
  </Formik>
</Dialog>
person alextrastero    schedule 13.08.2020
comment
Это не сработало для меня. Документы Formik предполагают, что вам нужно передать что-то в вызов userFormik() formik.org/docs/api/useFormik #пример - person peter.swallow; 14.06.2021