在Formik表单之外呈现Formik字段

Question

我们有自己的输入组件（如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并编写自己的表单验证逻辑之前，我想知道是否还有其他人有这种依赖性问题。

真的没办法在Field之外渲染Formik Formik吗？

Answer 1

Field组件是将表单字段连接到Formik状态的组件。它使用引擎盖下的背景; Formik是上下文提供者，Field是上下文消费者。 Field与Formik绑在一起，并没有在它之外使用。对于您想要渲染有时连接到Formik的表单字段而有时不连接的用例，我会导出两个不同的组件：

1. 与Formik无关的基本Checkbox组件。它应该只使用正常输入
2. Checkbox组件周围的Field包装器

虽然Field组件可以采用type，导致它呈现相应的输入，但can also take a render prop可以渲染任何你想要的东西，并且它传递给Formik为该字段管理的所有状态。

例如，您的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）。