Блог

У меня есть компонент формы и родительский компонент, который принимает компонент формы как дочерний:

 import {Formik, Form, Field} from 'formik'; import Parent from './Parent'  const sleep = (ms) =gt; new Promise((r) =gt; setTimeout(r, ms));   function App() {  return (  lt;Parentgt;  lt;Formik  initialValues={{  name: 'John',  age: 27  }}  onSubmit={async (values) =gt; {  console.log('values',values);  await sleep(2000);  return 'success'  }}  gt;  lt;Formgt;  lt;label htmlFor="name"gt;Namelt;/labelgt;  lt;Field  type="text"  name="name"  /gt;  lt;label htmlFor="stuff"gt;Agelt;/labelgt;  lt;Field  type="number"  name="age"  /gt;  lt;/Formgt;  lt;/Formikgt;  lt;/Parentgt;   ); }  export default App;   

 const Parent = (props) =gt; {   // I would like this function to be useable  const handleSubmit = async () =gt; {  const res = await onSubmit() // This should be Formik's onSubmit;  if (res) {  console.log('res', res);  }  };    return (  lt;divgt;  lt;h1gt;Hellolt;/h1gt;  {props.children}  lt;button type="submit"gt;Submit Formlt;/buttongt;  lt;/divgt;  ); }  export default Parent;  

Конечно, я мог бы поместить кнопку «Отправить» внутри формы formik, и она сработает нормально. Но я хотел бы каким-то образом запустить отправку из родительского компонента в функции handleSubmit (). Я попытался запустить children.props.onSubmit() в родительском, но это решение не дает никаких значений, так как onSubmit запускается неправильно.

Решение состояло в том, чтобы переместить Formik за пределы родительского, чтобы у меня был доступ ко всем функциям и значениям formik с помощью useFormikContext