Reactjs 在Formik窗体外部呈现Formik字段

我们有自己的输入组件（如

Checkbox

，

Textbox

，甚至

CurrencyInput

组件）

---

我们现在正在使用。因此，我们替换了所有

字段
组件是将表单字段连接到Formik状态的组件。它在引擎盖下使用上下文
Formik
是上下文提供者，
字段
是上下文使用者<代码>字段
与
Formik
绑定，除此之外没有任何用处。对于希望呈现有时连接到Formik，有时不连接到Formik的表单字段的用例，我将导出两个不同的组件：

与Formik无关的基本复选框组件。它应该只使用正常的输入
复选框组件周围的字段包装器
虽然
字段
组件可以采用
类型
，使其呈现相应的输入，但它呈现您想要的任何内容，并传递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>
  )
}

const复选框=（道具）=>{
...
返回(
{props.label}
)
};
常量CheckboxField=（道具）=>{
返回(
{（字段）=>}
)
}

现在，您可以使用两个呈现完全相同的组件，但其中一个用于Formik表单（
CheckboxField
），另一个可以在任何地方使用（
Checkbox
）

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>
  )
}