在 Formik 表单外渲染 Formik Field

Question

我们有自己的输入组件（例如 Checkbox、Textbox，甚至 CurrencyInput 组件）

我们现在正在使用 Formik。所以我们用<Field...替换了我们组件中的所有<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 is not a function

我们认为这是一个交易破坏者。但是在我们放弃 Formik 并编写我们自己的表单验证逻辑之前，我想知道是否还有其他人遇到过这种依赖性问题。

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

Answer 1

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

基本的 Checkbox 组件，与 Formik 无关。它应该只使用普通输入
复选框组件周围的字段包装器

虽然 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)。

在 Formik 表单外渲染 Formik Field

Rendering Formik Field outside Formik form

forms

reactjs

formik