React 最佳实践：动态表单（ant-customize-form）

ant-customize-formhttps://www.npmjs.com/package/ant-customize-form

动态表单的基本使用

1：安装 npm install   ant-customize-form   或者 yarn add  ant-customize-form

2：开箱即用，支持所有的ant组件属性

formItemConfig：

itemprops： 原有表单的配置值Form.item

type: 表单类型

show：展示条件，可以是boolen，或者是个函数，可以根据多个条件展示当前表单项

##  Form.item 的基本配置
          itemProps：对应 antd 的 <Form.Item></Form.Item> 的的属性
          type: 对应的当前使用的输入框类型  example  Input Radio 等
          children?：自定义文案，
           col?: 24,新增配置
          rowNum?：多少Form.Item为一行 example:  rowNum:2;
          typeProps：antd对应的输入框的配置属性     example: <Input {...typeProps}/>
          typeProps:{ onChange: (val: { target: { value: SetStateAction<string> } }) => {  //可以在onChange 设置其他表单的值
              formRef.setFieldsValue({
                type4: type4OptionsObj[val.target.value][0].value,
                });
          };
          show：是否展示当前表单项 show: () => {
                                     return {
                                             dependencies: ['type1'],  //依赖对应
                                             flag: formRef.getFieldValue('type1') === 'Apple' //展示的条件
                                             }
                                  }

         const formItemConfig=[
                 // 阶段标题的配置
                 { itemProps: { ...layout }, type: 'Title', children: '基础信息', rowNum: 1, typeProps: { level: 4 } }
         ]

fromConfig新增属性：

  space?:表单要分成几列   Space间距分

  col?：表单要分成几列，默认值1列 栅格分

  formProps：对应form的属性

  formItemOption： @Form.item 的基本配置

 const formConfig={
        col: 2, //一行几列属性
        formProps：formBaseConfig,
        formItemOption：formItemConfig,
        customize: {
            type1: <div>111</div> //字段key为typ1的自定义组件
        },
       formList: {
            type6: <BindFeeForm form={formRef} /> //针对与Form.List的情况
        }
    }

基本使用：

表单中内置了button按钮，

import { CustomizeForm, ItemTypes } from 'ant-customize-form';
import { Form } from 'antd';
export default () => {
    const [formRef] = Form.useForm()
    // 可以在onChange里面设置其他表单的值
    const formItemConfig = [
        {
            itemProps: { 
                        name: 'name', 
                        label: '关键字', 
                        rules: [{ required: true }] 
                        }, 
                 type: ItemTypes.INPUT,
            typeProps: {
                placeholder: '请输入收费标准',
                showCount: true,
                maxLength: 100,
            }
        },
        {
            itemProps: { name: '', label: '', }, type: ItemTypes.BUTTON,
        },

    ]
    const formBaseConfig = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        form: formRef,
        onValuesChange: (changedValues?: any, values?: unknown): void => {
            console.log(changedValues, values, 1212132312);
        },
        initialValues: {},

    }
    const formConfig = {
        col: 2,//一行几列，支持多列的情况
        formProps: formBaseConfig,
        formItemOption: formItemConfig,
    }

    return <div>
        <CustomizeForm  {...formConfig} />
    </div>
};

感兴趣可以star一下关注，有啥不合理的欢迎提建议

仓库地址：ant-customize-form仓库地址https://github.com/wangbaoqi1/ant-customize-form.git

 配置文案：配置文档