在Formik窗体外呈现Formik字段

Question

我们有自己的输入组件(比如Checkbox、Textbox，甚至CurrencyInput组件)

我们现在正在使用福米克。因此，我们在组件中用<Field...代替了 all <input...。

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不是一个函数

我们觉得这是dealbreaker.但是在我们放弃Formik并编写我们自己的表单验证逻辑之前，我想知道是否还有其他人存在这种依赖问题。

真的没有办法在Field之外呈现Formik Formik

Answer 1

Field组件将表单字段连接到Formik状态。它在幕后使用上下文；Formik是上下文提供程序，Field是上下文使用者。Field与Formik联系在一起，在它之外没有任何用处。对于您希望呈现表单字段(有时连接到Formik，有时不连接)的用例，我将导出两个不同的组件：

1. 与Formik无关的基本复选框组件。它应该只使用正常的输入
2. 围绕该复选框组件的字段包装器

虽然Field组件可以接受一个type，导致它呈现相应的输入，但是它可以呈现您想要的任何东西，并且它被传递给该字段的所有状态Formik。

例如，复选框和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)。