在 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外面渲染 FormikFormik吗？

Answer 1

该Field组件就是一个表单域连接到Formik状态。它在幕后使用上下文；Formik是上下文提供者和Field上下文消费者。Field被绑定到Formik并且在它之外没有任何用处。对于您想要呈现有时连接到 Formik 有时不连接的表单字段的用例，我将导出两个不同的组件：

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

虽然Field组件可以使用 a type，使其呈现相应的输入，但它也可以使用 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)。