react 表单数据形式配置化设计

更新时间：2022年07月13日 08:20:45 作者：政采云前端团队

这篇文章主要介绍了react表单数据形式配置化设计，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下

前言

在日常的中后台系统开发中，表单是和我们打交道非常多的名词。但是在一般的表单实现中、我们会做着很多重复的工作，不停在写 FormItem...，以及为组件加上“请输入/请选择”等无脑的 placeholder 文本和“请输入xx/请选择xx”等必填提示。其次表单一般都存在编辑页和详情页，而为了代码更好的维护性通常会将编辑和详情用一套代码实现。此时我们的代码里就会出现“isEdit ？表单组件：纯文本”这样无脑且重复率高的代码。秉承着更少代码更多产出的原则，我设计了一套配置化逻辑来提升这一开发体验。

实现

一般实现

// 一般实现
import React from 'react';
import { Form, Input, Select } from 'antd';

const Demo = (props) => {
  const { form: { getFieldDecorator }, obj = {}, isEdit } = props;
  return (
    <>
      <FormItem label="姓名" >
        {isEdit ? obj.name || '-' : 
          getFieldDecorator('name', {
            initialValue: obj.name,
          })(
            <Input placeholder="请输入" />
          )
        }
      </FormItem>
      <FormItem label="性别" >
        {isEdit ? obj.sex || '-' : 
          getFieldDecorator('sex', {
            initialValue: obj.sex,
            rules: [{ required: true, message: '请选择性别' }],
          })(
            <Select placeholder="请选择" >
              <Option key="male" value="male">男</Option>            
              <Option key="female" value="female">女</Option>
            </Select>
          )
        }
      </FormItem>
       <FormItem label="手机号" >
        {isEdit ? obj.phone || '-' : 
          getFieldDecorator('phone', {
            initialValue: obj.phone,
            rules: [{ required: true, message: '请输入手机号' }],
          })(
            <Input placeholder="请输入" />
          )
        }
      </FormItem>
    <>
  )
}

配置化的实现

// 配置化的实现
import React from 'react';
import { renderDataForm } from 'src/util/renderDataForm';

const Demo = (props) => {
  const { form, obj = {}, isEdit } = props;
  const conf = [{
    label: '姓名', // 表单的label
    field: 'name', // 表单字段名
    initialValue: obj.name, // 表单默认值
    required: false, // 是否必填、默认必填
  }, {
    label: '性别',
    field: 'sex',
    initialValue: obj.sex,
    formItemType: 'Select', // 表单类型默认 Input
    options: [{ value: 'male', label: '男' }, { value: 'female', label: '女' }], // 下拉选项
  }, {
    label: '手机号',
    field: 'phone',
    initialValue: obj.phone,
  }];
  const dataForm = isEdit ? 'form' : 'text';
  // 传入form，表单配置，想要的数据形式
  return renderDataForm(form, conf, dataForm));
}

实现思路

如上图所示，无论是在详情页中显示文本亦或是编辑页中的表单组件包裹的数据，其实本身所对应的都是同一个数据，只是展示形式不一样而已。在这里我们暂时将数据的形式定为表单组件形式与文本形式。其实在实际的使用中，由于数据的收集形式不同，会出现第三种数据形式。它就是表单文本形式，一种以文本展示但数据可被表单自动收集的形式，我把它定义为 FormText（如下所示）。至此，针对实现数据详情与编辑形式的方案有了这样两种，表单与文本组合或表单与表单文本组合的实现。本次我选择表单与文本组合的方案。

/**
 * 用于 Form 表单内部受控展示文本
 */
export default class FormText extends Component {
  render() {
    const { value, formatMethod = a => a, defaultText = '-', ...resetProps } = this.props;
    return <span {...resetProps}>{formatMethod(value) || defaultText}</span>;
  }
}
// 使用
<FormItem label="姓名">
  {getFieldDecorator('name', {
      initialValue: 'egg',
  })(<FormText />)}
</FormItem>

具体实现

1、形式选择(表单组件 or 文本)

const renderDataForm = (form, conf = {}, dataForm = 'form') => {
  // customRenderText 自定义文本形式
  const { customRenderText } = conf;
  return (
    <FormItem label={conf.label} {...conf.formItemProps} >
      {dataForm === 'form' ? renderFormItem(form, conf) : 
        customRenderText ? customRenderText(conf) : renderText(conf) }
    </FormItem>
  );
};

2、表单组件选择

export const renderFormItem = (form, rest) => {
  const { getFieldDecorator } = form;
  const { label = '', field = '', formItemType = 'input', initialValue, required = true, rules = [], ...itemRest } = rest;
  return (getFieldDecorator(field, {
    initialValue,
    rules: [
      // 必填提示
      { required, message: renderMessage(formItemType, label) },
      ...rules,
    ],
    ...(formItemType === 'upload' ? { // Upload组件的通用配置
      getValueFromEvent: (e) => {
        if (Array.isArray(e)) {
          return e;
        }
        return e && e.fileList;
      },
      valuePropName: 'fileList' } : {}),
  })(
    renderItem(formItemType, itemRest)
  ));
};

// 选择表单组件
const renderItem = (formItemType, itemRest) => {
  const { options = [], CustomFormItem } = itemRest;
  const obj = { Input, TextArea, InputNumber, Upload, Select, RadioGroup, CheckboxGroup, DatePicker };
  // 自定义的表单组件
  if (formItemType === 'CustomFormItem') {
    return <CustomFormItem {...itemRest} />;
  }
  // 不存在对应组件时返回默认的 Input 组件
  if (!obj[formItemType]) {
    return <Input placeholder="请输入" {...itemRest} />;
  }
  const Comp = obj[formItemType];
  // 双标签组件处理
  if (['Select', 'Upload'].includes(formItemType)) {
    return formItemType === 'Upload' ? (
      <Upload
        {...itemRest}
      >
        <Button><Icon type="upload" />上传</Button>
      </Upload>
    ) : (
      <Comp {...getDefaultCompProps(itemRest)} {...itemRest} >
        {options.map(el => (
          <Option key={el.value} value={el.value}>{el.label || el.name}</Option>))}
      </Comp>
    );
  }
  // 单标签组件
  return <Comp {...getDefaultCompProps(itemRest)} {...itemRest} />;
};

// 获取组件属性
const getDefaultCompProps = (conf = {}) => {
  const { formItemType } = conf;
  const props = {};
  props.placeholder = renderMessage(formItemType);
  if (formItemType === 'InputNumber') {
    // zeroOmit 小数点后多余的零是否省略，limitDecimal 限制最长的小数位数
    const { zeroOmit = true, limitDecimal = 6 } = conf;
    const limitDecimalsF = (value) => {
      const reg = new RegExp(`^(-)*(\\d+)\\.(\\d{${limitDecimal}}).*$`);
      return `${value}`.replace(reg, '$1$2.$3');
    };
    if (zeroOmit) {
      props.formatter = limitDecimalsF;
      props.parse = limitDecimalsF;
    }
  }
  if (formItemType === 'Input') {
    props.maxLength = 100; // 输入框的默认最大输入字符长度
  }
  if (formItemType === 'TextArea') {
    props.maxLength = 500; // 文本框的默认最大输入字符长度
  }
  return props;
};

3、映射文本

export const renderText = (rest) => {
  const { formItemType = 'Input', initialValue, selectOptions = [], selectMode = '', options = [] } = rest;
  switch (formItemType) {
  case 'RadioGroup': 
    return (options.find(item => item.value === initialValue) || {}).label || '-';
  case 'DatePick': 
    const { format = 'YYYY-MM-DD HH:mm:ss' } = rest;
    // 日期组件组件值格式化为对应的 文本
    return initialValue !== undefined ? moment(initialValue).format(format) : '-';
  // ...code
  default: 
    return bizStringFormat(initialValue); // 无 值 时 默认 ‘-'
  }
}

4、通用校验规则整理

export const postCode = /^[0-9]{6}$/;
export const phone = /^1\d{10}$/;
// ...其他正则

// form rules
export const postCodeRule = {
  pattern: postCode,
  message: '请输入6位数字',
};
export const phoneRule = { 
  pattern: phone,
  message: '请输入11位号码',
};
// ...其他表单校验规则

使用示例

const Demo = (props) => {
  const { form } = props;
  // 数据
  const obj = {
    email: '123@egg.com',
    addr: '派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星派大星',
    sort: 'up',
    birthday: '1999-01-23',
    sex: 'male',
    file: [{ fileId: '123', name: '信用承诺书', size: 1024 }],
  };
  // 因为数据的形式默认为表单，所以 dataForm: 'form' 可不配置
  const formConf = [{
    label: '邮箱',
    field: 'email',
    initialValue: obj.email,
    rules: [emailRule], // emailRule 为邮箱校验规则
  }, {
    label: '地址',
    field: 'addr',
    initialValue: obj.addr,
    formItemType: 'TextArea',
  }, {
    label: '排序',
    field: 'sort',
    initialValue: obj.sort,
    formItemType: 'Select',
    options: [{ value: 'up', label: '升序' }, { value: 'down', label: '降序' }],
  }, {
    label: '生日',
    field: 'birthday',
    initialValue: obj.birthday,
    formItemType: 'DatePicker',
    format: 'YYYY-MM-DD', // 日期组件的格式配置字段
  }, {
    label: '性别',
    field: 'sex',
    initialValue: obj.sex,
    formItemType: 'RadioGroup',
    options: [{ value: 'male', label: '男' }, { value: 'female', label: '女' }],
  }, {
    label: '信用承诺书',
    field: 'file',
    initialValue: obj.file,
    formItemType: 'Upload',
  }];
  const dataForm = isEdit ? 'form' : 'text';
  // 将配置遍历传入renderDataForm
  // 当然你也可以封装成组建，直接向组建传入 form、formConf，减少遍历的重复书写和整洁
  return formConf.map(item => renderDataForm(form, item, dataForm));

最终呈现如下：

1.编辑

2. 触发校验

3.详情

总结

虽然，在目前的前端领域，关于页面配置、可视化等更加复杂的能力，已有更丰富和更全面的实现。比如我们前端团队的无相应用早已实现整个表单页的配置化能力。而本文展示的表单块的代码配置化能力接入较为轻量、内容上更容易理解。

到此这篇关于react 表单数据形式配置化设计的文章就介绍到这了,更多相关react 表单数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React父子组件间的通信是怎样进行的
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2023-03-03
React state状态属性详细讲解
React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态
2022-09-09
详解react如何在组件中获取路由参数
这篇文章主要介绍了详解react如何在组件中获取路由参数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
React Native验证码倒计时工具类分享
这篇文章主要为大家分享了React Native验证码倒计时工具类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
react同构实践之实现自己的同构模板
这篇文章主要介绍了react同构实践之实现自己的同构模板，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
react实现antd线上主题动态切换功能
这篇文章主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
react hook使用useState更新数组,无法更新问题及解决
这篇文章主要介绍了react hook使用useState更新数组,无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
react组件从搭建脚手架到在npm发布的步骤实现
这篇文章主要介绍了react组件从搭建脚手架到在npm发布的步骤实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
React中使用react-player 播放视频或直播的方法
这篇文章主要介绍了React中使用react-player 播放视频或直播，本文教大家如何使用react框架及创建实例的代码,本文内容简短给大家介绍的非常详细，需要的朋友可以参考下
2022-01-01
React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09