reactjs - 在 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 is not a function

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

难道真的没有办法渲染Formik Field外面Formik ？

Answer 1

Field组件是将表单字段连接到 Formik 状态的组件。它在幕后使用上下文； Formik是上下文提供者并且 Field是上下文消费者。 Field绑定(bind)到 Formik并且在它之外没有任何用处。对于您想要渲染有时连接到 Formik 有时不连接的表单字段的用例，我将导出两个不同的组件:

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

而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 )。