简单的封装form组件

前言

用 antd 经常会碰到表单的提交，每次写一堆标签看着头疼，所以就封装了一个组件。
我个人很喜欢这样常规的封装，代码读起来舒服很多，改起来也更轻松。

代码实现

import { FC, useMemo } from 'react'
import { Button, Form, FormItemProps, FormProps, Space, ButtonProps } from 'antd'
const { Item } = Form

interface IConfigForm extends FormProps {
    form?: any,
    FormProps?: FormProps,
    FormItems?: FormItemProps[],
    Btns?: boolean | ButtonProps[],
    style?: React.CSSProperties,
    className?: string
}

/**
 * 直接配置的form组件
*/
const ConfigForm: FC<IConfigForm> = (props) => {
    const { FormProps, FormItems = [], Btns = true, style, form = null, className } = props

    const renderBtns = useMemo(() => {
        if (Btns == true) {
            return <Space size={10}>
                <Button type='primary' htmlType='submit' onClick={() => {
                    if (form) {
                        form?.submit()
                    }
                }}>提交</Button>
                <Button style={{ marginLeft: 10 }} onClick={() => { }}>返回</Button>
            </Space>
        }
        if (Array.isArray(Btns)) {
            return <Space size={10}>
                {Btns.map((e, index) => {
                    return <Button {...e} key={index} />
                })}
            </Space>
        }
        return null
    }, [Btns])

    return <div className={`ConfigForm ${className}`} style={style}>
        <Form
            {...FormProps}
            form={form}
        >
            {
                FormItems.map((e, index) => {
                    if (e.name == 'slot') {
                        return <>{e.children as React.ReactNode}</>
                    } else {
                        return <Item {...e} key={index}>
                            {
                                e.children
                            }
                        </Item>
                    }
                })
            }
            {
                renderBtns
            }
        </Form>
    </div >
}

export default ConfigForm

组件api 说明

属性	说明	类型	默认值
form	表单实例, 提供了form的实例，默认按钮的提交事件才会触发， form 示例是通过antd Form 的useForm 获取	FormInstance	-
FormProps	表单属性参考antd Form 的属性	FormProps	-
FormItems	表单项配置, 由FormItem 属性组成的数组，参考antd FormItem 的属性	FormItemProps[]	-
Btns	底部按钮配置 , 可以传入一个数组，来显示多个按钮,将会覆盖默认按钮，也可以传入一个布尔值，true为默认按钮，false 不显示按钮	ButtonProps[] \| boolean	true
style	样式	CSSProperties	-
className	类名	string	-

试一试

⚠️ 注意 技术力有限，FormItem 可以放入children , 来显示表单，但是这里编辑框无法支持

前言​

代码实现​

组件api 说明​

试一试​

前言

代码实现

组件api 说明

试一试