Reactjs 将Formik与React.FC一起使用

我有一个表单，它被设置为React中的函数组件，其中表单值由状态挂钩管理。我想将Formik添加到此中，但是，当我设置增强表单时，出现以下错误：

Argument of Type FC<Props> is not assignable to parameter of type 'CompositeComponent<FormikSharedConfig & FormikState<{}> & FormikActions<{}> & FormikHandlers & FormikComputedProps<{}> & FormikRegistration>

FC类型的参数不可分配给'CompositeComponent'类型的参数 组件有如下设置

const Form: React.FC<Props> = () => {
    [formVal, setFormVal] = React.useState<string>('')
    [formValTwo, setFormValTwo] = React.useState<string>('')

    // some functions related to managing the form
    return (
       <>
         // render form
       </>
    )
}

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(EnhancedForm) // above error shows here

const Form:React.FC=（）=>{
[formVal，setFormVal]=React.useState（“”）
[formValTwo，setFormValTwo]=React.useState（“”）
//与管理表单相关的一些功能
返回(
//渲染形式
)
}
常数EnhancedForm=withFormik({
mapPropsToValues:（）=>（{…props}）
handleSubmit：（值，{setSubmitting}）=>{…}
})（EnhancedForm）//此处显示上述错误

---

我用Formik错了吗？如果是这样，我将如何对React.FC进行表单管理？

道具的价值是什么

在代码片段中，您为什么要执行以下操作：

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(EnhancedForm) // above error shows here

而不是：

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(Form) // above error shows here

也许你可以试试这个：

import { InjectedFormikProps } from 'formik';

interface FormValues {
  // The values of your form
  // email: string;
  // password: string;
}

interface Props {
  // your props
}

const Form: React.FC<InjectedFormikProps<Props, FormValues>> = () => {
    [formVal, setFormVal] = React.useState<string>('')
    [formValTwo, setFormValTwo] = React.useState<string>('')

    // some functions related to managing the form
    return (
       <>
         // render form
       </>
    )
}

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(Form) // above error shows here

从'formik'导入{InjectedFormikProps}；
接口窗体值{
//表单的值
//电子邮件：字符串；
//密码：字符串；
}
界面道具{
//你的道具
}
常数形式：React.FC=（）=>{
[formVal，setFormVal]=React.useState（“”）
[formValTwo，setFormValTwo]=React.useState（“”）
//与管理表单相关的一些功能
返回(
//渲染形式
)
}
常数EnhancedForm=withFormik({
mapPropsToValues:（）=>（{…props}）
handleSubmit：（值，{setSubmitting}）=>{…}
})（Form）//此处显示上述错误

---

通过这种方式，您可以告诉Typescript您的

表单

组件接受与Formik相关的道具。因为Typescript无法知道这一点

道具的价值是什么

在代码片段中，您为什么要执行以下操作：

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(EnhancedForm) // above error shows here

而不是：

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(Form) // above error shows here

也许你可以试试这个：

import { InjectedFormikProps } from 'formik';

interface FormValues {
  // The values of your form
  // email: string;
  // password: string;
}

interface Props {
  // your props
}

const Form: React.FC<InjectedFormikProps<Props, FormValues>> = () => {
    [formVal, setFormVal] = React.useState<string>('')
    [formValTwo, setFormValTwo] = React.useState<string>('')

    // some functions related to managing the form
    return (
       <>
         // render form
       </>
    )
}

const EnhancedForm = withFormik ({
    mapPropsToValues: () => ({...props})

    handleSubmit:(values, {setSubmitting}) => {...}

})(Form) // above error shows here

从'formik'导入{InjectedFormikProps}；
接口窗体值{
//表单的值
//电子邮件：字符串；
//密码：字符串；
}
界面道具{
//你的道具
}
常数形式：React.FC=（）=>{
[formVal，setFormVal]=React.useState（“”）
[formValTwo，setFormValTwo]=React.useState（“”）
//与管理表单相关的一些功能
返回(
//渲染形式
)
}
常数EnhancedForm=withFormik({
mapPropsToValues:（）=>（{…props}）
handleSubmit：（值，{setSubmitting}）=>{…}
})（Form）//此处显示上述错误

---

通过这种方式，您可以告诉Typescript您的

表单

组件接受与Formik相关的道具。因为Typescript无法知道这一点

选中此处，我尝试了这个方法，但当我为表单值（称为FormValues）创建一个接口时，出现了这个错误，'interface FormProps Extended FormikProps，Props{}'，然后我的组件const Form=React.FC=（{formValue}）=>{…}，这里找不到formValue，它告诉我FormProps上不存在Property formValue…即使我用formValue扩展了FormProps，您是否可以在sandbox中创建一个示例？

useFormik

hook？检查这里，所以我尝试了这一点，但当我为表单值（称为formValue）创建接口时，出现了此错误，'接口FormProps扩展FormkProps，Props{}'然后我的组件const form=React.FC=（{formValue}）=>{…}，这里找不到formValue，它告诉我FormProps上不存在Property formValue…即使我用formValue扩展了FormProps，你能在sandbox中创建一个示例吗？

useFormik

hook？