Formik, использоватьField () в дочернем компоненте? - PullRequest
Новая
       0

Formik, использоватьField () в дочернем компоненте?

2 голосов
/ 02 марта 2020

У меня есть отдельный модуль, над которым я работаю, этот модуль должен содержать formik, поддерживающий HTML элементы ввода.

Проблема в том, что я не могу использовать хук useFields(), так как мой компонент модуля не подключается к контексту formik.

Вот мой компонент, который находится в другом модуле: 

import React from "react";
import PropTypes from "prop-types";
import { useField } from "formik";

export function TextField({ label, ...props }) {
  const [field, meta] = useField(props);
  return <input {...field} {...meta} />;
}

TextField.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  showErrors: PropTypes.bool
};

TextField.defaultProps = {
  label: "",
  showErrors: true
};

export default TextField;

, а вот моя форма Formik: 

<Formik
      initialValues={{
        firstName: "firstName"
      }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
    >
      {formik => (
        <Form>
          <TextField name="firstName" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>

Независимо от того, что я делаю, я получаю следующую ошибку:

TypeError: Невозможно прочитать свойство 'getFieldProps' из неопределенного

У кого-либо есть представление, что я делать неправильно?

...