react 封装通用组件之form表单

灰太狼 2021-12-10 10:31 893阅读 0赞

# react 常用组件API调用的模块化封装–form组件 #

--------------------

> 工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。

### **form表单的封装** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 1]

> 1.  新建basicForm 表单组件  
>     \- 在component中新建一个basicForm.js的表单,主要代码如下  
>     \- ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 2]  
>     \- 以input、select为例  
>     \-  
>     \`\`\`

initFormList=()=>{
        const p = this;
        const formItemList = [];
        const { getFieldDecorator } = p.props.form;
        const { formList,extendFormList } = p.props;
        if (formList && formList.length > 0) {
        formList.forEach(item => {
            const {
            label,
            field,
            tree,
            type,
            initialValue,
            placeholder,
            width,
            name
            } = item;
       if (type === "INPUT") {
          const INPUT = (
            <FormItem key={field} label={label}>
            {getFieldDecorator(`${field}`,{
                initialValue, // true | false
            })(
                <Input style={
       { width }} placeholder={placeholder} />
            )}
            </FormItem>
          );
          formItemList.push(INPUT);
        } else if (type === "SELECT") {
          const SELECT = (
            <FormItem label={label} key={field}>
            {getFieldDecorator(`${field}`,{
                initialValue, // true | false
            })(
              <Select style={
       { width }} placeholder={placeholder}>
                {Utils.getOptionList(item.list, name)}
              </Select>
              )}
            </FormItem>
          );
          formItemList.push(SELECT);
     ```
    - 对组件中的list进行遍历，将样式 key label field initialValue等内容开放出去
    - 展开时的表单也是如此

> 1.  在util中写通用方法比如格式化时间，处理redio、Checkbox的方法  
>     \- 封住表单中会有对时间组件的时间格式化处理，对radio、Checkbox列表的处理，代码如下：  
>     \`\`\`

if(fieldsValue.beginTime){
            fieldsValue.beginTime = Utils.formateDate(fieldsValue.beginTime)
        }
        
    
      formateDate(time) {
        if (!time) return '';
        const date = new Date(time);
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        }

> 1.  页面中引用调用-- 如格式化时间

formateDate(time) {
       	    if (!time) return '';
       	    const date = new Date(time);
       	    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
       	  },

> 主要结构如下：详细代码–> 在github中获取

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 3]

#### 完成后的界面 ####

![img1][]

> 链接地址：  
> [网页地址][Link 1]

> github 地址：  
> [github][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]: /images/20211210/e63e0be46d114f778135312a6a8057fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 1]: /images/20211210/c54448ddf644496eb04584ed80f79856.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 2]: /images/20211210/b69f50a53cdc42b094037cd3e016051d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70 3]: /images/20211210/f1c4a130b97f4f2ca0c9081907e51012.png
[img1]: /images/20211210/76420f3328964b17aaa152cc87957e86.png
[Link 1]: https://s2265681.github.io/component/public/
[github]: https://github.com/s2265681/component