Обновление другого компонента при изменении формы Formik - PullRequest
Новая
       2

Обновление другого компонента при изменении формы Formik

0 голосов
/ 23 мая 2019

Существует базовая форма Formik: 

<Formik
      initialValues={{ email: '', color: 'red', firstName: '' }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <Field type="email" name="email" placeholder="Email" />
          <div>other inputs ... </div>
          <button type="submit">Submit</button>
        </form>
      )}
    />

Когда любой вход в нем изменяется (не отправляется, но изменяется) - мне нужно обновить другой компонент, который находится за пределами <Formik />.«Внешний» компонент должен получать все данные формы.

Есть ли способ сделать это без добавления отдельного обработчика изменений для каждого отдельного ввода формы?Или решение состоит в том, чтобы попытаться вставить «внешний» компонент внутрь <Formik />?

1 Ответ

1 голос
/ 23 мая 2019

Formik предоставляет values объект, который вы можете использовать для получения значений снаружи. 

const App = () => {
  const initialValues = { email: '', color: 'red', firstName: '' }

  const [formValues, setformValues] = useState(initialValues);

  const getFormData = values => {
    // access values here
  };
  return (
    <div>
      <h1>Formik take values outside</h1>
      <Formik
        initialValues={initialValues}
        ...
      >
        {props => {
          setformValues(props.values); // store values in state 'formValues'
          getFormData(props.values); // or use any function to get values like this
          return (
            <form onSubmit={props.handleSubmit}>
            ...

Рабочая демонстрация в кодах и в окне здесь

...