Рендеринг Formik Field вне формы Formik - PullRequest
Новая
       9

Рендеринг Formik Field вне формы Formik

0 голосов
/ 28 марта 2019

У нас есть свои собственные компоненты ввода (например, Checkbox, Textbox или даже CurrencyInput компонент)

Мы сейчас используем Formik . Таким образом, мы заменили все <input... на <Field... в наших компонентах, например. 

const Checkbox = (props) => {
  ...
  return (
    <div className={myClass1}>
      <Field type='checkbox' name={props.name} className={myClass2} ... />
      <label ...>{props.label}</label>
    </div>
  )
};

Теперь проблема в том, что мы больше не можем иметь автономный Checkbox вне формы (например, для опции только на экране). Будет выброшено:

this.props.formik.registerField не является функцией

Мы считаем, что это сделка . Но прежде чем мы откажемся от Formik и напишем нашу собственную логику проверки формы, я хотел бы знать, есть ли у кого-то еще проблема с зависимостями.

Неужели нет способа визуализации Formik Field снаружи Formik?

1 Ответ

1 голос
/ 28 марта 2019

Компонент Field - это то, что связывает поле формы с состоянием Formik. Он использует контекст под капотом; Formik является поставщиком контекста, а Field является потребителем контекста. Field привязан к Formik и не имеет смысла вне его. Для вашего случая использования, когда вы хотите визуализировать поля формы, которые иногда связаны с Formik, а иногда нет, я бы экспортировал два разных компонента:

  1. Базовый компонент Checkbox, который не имеет ничего общего с Formik. Нужно просто использовать нормальный ввод
  2. Обертка Field вокруг этого компонента Checkbox

В то время как компонент Field может взять type, в результате чего он рендерит соответствующий ввод, он также может взять опору рендеринга для рендеринга того, что вы хотите, и он передается всем Формик управляет этим полем.

Например, компоненты Checkbox и CheckboxField могут выглядеть примерно так: 

const Checkbox = (props) => {
  ...
  return (
    <div className={myClass1}>
      <input type='checkbox' checked={props.checked} onChange={props.onChange} />
      <label ...>{props.label}</label>
    </div>
  )
};

const CheckboxField = (props) => {
  return (
    <Field name={props.name}>
      {(field) => <Checkbox label={props.label} {...field} />}
    </Field>
  )
}

Теперь у вас есть два компонента, которые отображаются одинаково, но один предназначен для использования в форме Formik (CheckboxField), а другой может использоваться где угодно (Checkbox).

...