4. 修改指定数据内容

4.1 在列表页定义更新数据的对话框

本节我们在当前列表页src/pages/MemberList/index.tsx增加一个用来更新数据的对话框。为了聚焦开发的原理，我们仅操作三个字段：姓名、性别、政治面貌。

4.1.1 准备必要的变量和函数

本节主要是定义各种对话框需要的变量和函数。其中变量用到了各种React Hook，如果你还不能理解这些内容，那么你需要重新学习本学院中关于React Hook的资料。

• 首先完成必要的引用

  import React, { useState, useRef, useEffect } from 'react';
  import { Drawer, message, Button, Modal, Form } from 'antd';
  import ProForm, { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';

• 因为在对话框的下拉列表中也需要用columns: ProColumns中的那些代码，所以我们先把这些代码显式的定义成变量

  const degreeEnum = {
    0: ' ',
    1: '学士学位',
    2: '硕士学位',
    3: '博士学位',
  }
  const genderEnum = {
    0: '未选',
    1: '男',
    2: '女',
  }

  然后修改columns中对应的定义

        {
      title: '性别',
      dataIndex: 'gender',
      hideInForm: true,
      //改成引用前文定义的变量
      valueEnum: genderEnum,
    },
    {
      title: '最高学位',
      dataIndex: 'degree',
      hideInTable: true,
      //改成引用前文定义的变量
      valueEnum: degreeEnum,
    },

• 定义一个State Hook变量用来对应对话框显式的状态

  const [dataFormVisible, setDataFormVisible] = useState<boolean>(false);

• 使用useForm获得一个form实例，在下文用来定义对话框中的form

  const [formRef] = Form.useForm();

• 定义一个设置对话框内容初始状态的函数

  const initialValues = () => {
    return {
      realName: currentRow?.realName,
      gender: `${currentRow?.gender}`,
      degree: `${currentRow?.degree}`,
    };
  }

  这里有个非常不小的“坑”——尽管我们给valueEnum设置的键值是数字类型，但它的本质还是是被当成字符串的，所有在转换成options以后，每个选项的value都变成成了字符串，这样如果我们直接把代码值放到initialValues里面，那么显示的时候因为找不到匹配的选项，他会直接把数字显示在那里。

  这里我们的做法是把代码值从数字改成了字符串来兼容这个问题。下一节，我们会展示另外一种更好的办法

• 定义一个依赖对话框状态的Effect Hook，当对话框可见的时候重置所有的内容

  useEffect(() => {
    if (formRef && dataFormVisible) formRef.resetFields();
  }, [dataFormVisible]);

  这里是要填平另外一个非常巨大的“坑”——默认的情况下，已经渲染过的form不会自动销毁和重建，当其再次被显示的时候，也不会自动的重新执行初始化工作。如果不加处理，再次打开这个对话框的时候，我们会看到上次关闭前的状态而不是新的内容。

这个问题通常有两种解法：

1. 用上面定义的dataFormVisible变量在对话框隐藏以后销毁它（每次需要的时候都重新创建）
2. 每次使用对话框前显式执行重置对话框内容的动作resetFields

第1种方式效率较低，所以我们倾向于使用第2种方式。通常的想法是在设置控制对话框显示的开关变量（dataFormVisible）为true后调用resetFields。这里我们应用Effect Hook实现同样的控制逻辑，相比之下这种方式看起来更加的优雅。尤其如果有多个途径都可以激活对话框的时候，这种方式更易于维护，也大大降低了出现为人为失误的可能。

4.1.2 为每行数据增加修改数据的链接

在colums定义的最后一列（option部分）的render属性函数中增加一个用来显示对话框的链接

        <a 
          key="update"
          onClick={() => {
                       //想想看，这个是为什么？
            setShowDetail(false);
            setCurrentRow(record);
            //用了上面的useEffect，就不用在这里做重置了
            //formRef.resetFields()
            setDataFormVisible(true)
          }}
        >修改</a>,

4.1.3 实现一个简单的模态数据对话框

这个可以放在Drawer的前面

      <ModalForm
        form={formRef}
        title={'修改会员信息'}
        width="400px"
        visible={dataFormVisible}
                //注意：这里是执行初始化函数获得返回值，不要写成initialValues={initialValues}
        initialValues={initialValues()}
        onVisibleChange={ (visible) => {
            if(!visible)
              setCurrentRow(undefined);
            setDataFormVisible(visible)
          }
        }
        onFinish={async (value) => {
          message.warning('没有实现保存功能');
          setCurrentRow(undefined);
          setDataFormVisible(false);
        }}
      >
        <ProFormText name="realName" label="会员姓名" />
        <ProForm.Group>
          <ProFormSelect width="xs" name="gender" label="性别" 
                        valueEnum={genderEnum} allowClear={false} />
          <ProFormSelect width="xs" name="degree" label="最高学历" 
                        valueEnum={degreeEnum} allowClear={false} />
        </ProForm.Group>
            </ModalForm>

这时候在数据后点击修改，就可以看到定义好的对话框（当然，他现只能显示，还不能真正的修改数据）

4.2 把对话框定义为组件

把对话框的代码和管理列表数据的的代码放到一起增加了代码的复杂度，也没法复用。所以接下来我们定义一个管理会员数据的对话框组件，这样有利于保持列表主程序的代码整洁，也有利于在其他地方复用

4.2.1 将代码定义放到独立的文件中

因为主程序和对话框需要相同的代码定义，为了提高可维护性，减少出错可能，我们在定义组件前先把代码定义放到独立的文件中。

建立新文件src/services/member.enum.ts

export const  genderEnum = {
  0: '未选',
  1: '男',
  2: '女',
}
export const degreeEnum = {
  0: ' ',
  1: '学士学位',
  2: '硕士学位',
  3: '博士学位',
}

然后在主程序中删除原来的定义并从这个文件中引用

import { genderEnum, degreeEnum } from '@/services/member.enum';

4.2.2 定义一个通用的数据对话框组件

创建一个目录src/pages/MemberList/components，在该目录新建一个文件MemberDataForm.tsx

import { message, Form } from "antd";
import { useEffect } from "react";
import ProForm, { ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import { genderEnum, degreeEnum } from '@/services/member.enum';
const DataForm = (props:{ [key: string]: any }) => {
  const { visible, operation, doClose, record } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    //这里我们用了另外一种方式，当对话框可见的时候，显式的设置他的值
    if (form && visible) form.setFieldsValue(record);
  }, [visible]);
  const getOptionsFormValueEnum = (valueEnum: Object)  => {
    return (Object.entries(valueEnum)).map( ([key, value]) => ({
      value: parseInt(key),
      label: value,
    }))
  }
  const handleResponse = () => {
    message.warning('没有实现保存功能');
    doClose();
  };
  const handleCancel = () => {
    doClose();
  };
  const onFinish = async () => {
    handleResponse();
  };
  const getTitle = () => {
    switch (operation) {
      case "create":
        return "增加会员";
      case "edit":
        return "修改信息";
      default:
        return "类型错误";
    }
  };
  return (
    <ModalForm
      form={form}
      title={getTitle()}
      visible={visible}
      onVisibleChange={(visible) => {
        if (!visible) handleCancel();
      }}
      onFinish={onFinish}
    >
      <ProFormText name="realName" label="会员姓名" />
      <ProForm.Group>
        <ProFormSelect width="xs" name="gender" label="性别" 
          options={getOptionsFormValueEnum(genderEnum)} allowClear={false} />
        <ProFormSelect width="xs" name="degree" label="最高学历" 
          options={getOptionsFormValueEnum(degreeEnum)} allowClear={false} />
      </ProForm.Group>
    </ModalForm>
  );
};
export default DataForm;

可以看到，这个组件的逻辑和上一节的基本一致，但增加了一些更优雅的设计。

4.2.3 对主程序的修改

• 首先在主程序src/pages/MemberList/index.tsx中引用新的组件

  import DataForm from './components/MemberDataForm';

• 删除上一节定义的各种Hook和初始化函数，增加如下的State Hook

  const [dataFormState, setFormState] = useState({ 
    showModal: false, 
    operation: '', 
    record: {}
  });

• 把链接的onClick函数改成下面的样子

        <a 
          key="update"
          onClick={() => {
              setShowDetail(false);
            setFormState({ showModal: true, operation: 'edit', record: record })
          }}
        >修改</a>,

• 删除之前ModalForm定义，改成新定义的组件

      <DataForm
        visible={dataFormState.showModal}
        record={dataFormState.record}
        operation={dataFormState.operation}
        doClose={() => 
          setFormState({ showModal: false, operation: '', record: {}})
        }
      />

• 根据Visual Studio Code的警告信息删除不再使用的引用。

现在看到的对话框应该是这个样子的

4.3 增加更多的字段

我们在上一节中通过setFieldsValue(record)把数据的所有内容都注入到对话框了，我们在本节把其他的字段也都放到form中。

4.3.1 把对话框的内容补充完整

• 首先在src/services/member.enum.ts增加其他必要的代码表 ```typescript export const educationEnum = { 0: ‘ ‘, 1: ‘小学及以下’, 2: ‘初中’, 3: ‘高中、技校’, 4: ‘中专’, 5: ‘大专’, 6: ‘大学本科’, 7: ‘硕士研究生’, 8: ‘博士研究生’, }

export const partyEnum = { 0: ‘ ‘, 1: ‘中国共产党’, 2: ‘中国国民党革命委员会’, 3: ‘中国民主同盟’, 4: ‘中国民主建国会’, 5: ‘中国民主促进会’, 6: ‘中国农工民主党’, 7: ‘中国致公党’, 8: ‘九三学社和台湾民主自治同盟’, }

export const nationalityEnum = { 0: ‘汉族’, 1: ‘满族’, 2: ‘蒙古族’, 3: ‘回族’, 4: ‘藏族’, 5: ‘维吾尔族’, 6: ‘苗族’, 7: ‘彝族’, 8: ‘壮族’, }

为了简化版面，我们这里的代码清单做了部分的精简，在实际的项目中应根据业务要求编写完整。
- 在`src/pages/MemberList/components/MemberDataForm.tsx`中增加引用
```typescript
import { 
  genderEnum, 
  degreeEnum, 
  partyEnum, 
  educationEnum, 
  nationalityEnum 
} from '@/services/member.enum';

• 把对话框文件中的函数getOptionsFormValueEnum删除后放到src/utils/utils.ts中

  export function getOptionsFormValueEnum (valueEnum: Object) {
  return (Object.entries(valueEnum)).map( ([key, label]) => ({
    value: parseInt(key),
    label,
  }))
  }export function getOptionsFormValueEnum (valueEnum: Object) {
  return (Object.entries(valueEnum)).map( ([key, label]) => ({
    value: parseInt(key),
    label,
  }))
  }

• 在对话框文件中引用此函数和其他的ProForm组件

  import { getOptionsFormValueEnum } from '@/utils/utils'
  import 
    ProForm, { 
      ModalForm, 
      ProFormText, 
      ProFormSelect, 
      ProFormDatePicker 
  } from '@ant-design/pro-form';

• 编写完整的对话框内容

    <ModalForm
      form={form}
      title={getTitle()}
      visible={visible}
      layout="horizontal"
            omitNil={false}
      onVisibleChange={(visible) => {
        if (!visible) handleCancel();
      }}
      onFinish={onFinish}
    >
      <ProForm.Group>
        <ProFormText name="realName" label="会员姓名" 
                    placeholder="请输入会员真实姓名" width="sm" 
                    required />
        <ProFormDatePicker name="birthday" label="出生日期" 
                    width="sm" allowClear={false}/>  
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText name="identityNumber" label="身份证号" 
                    placeholder="请输入身份证号码" width="sm"
          required />
        <ProFormSelect name="gender" label="性别" 
                    placeholder="选择性别" width={64}
          options={getOptionsFormValueEnum(genderEnum)}
          allowClear={false} />
      <ProFormSelect name="nationality" label="民族" 
                    placeholder="选择民族" width="xs"
          options={getOptionsFormValueEnum(nationalityEnum)} 
          allowClear={false} />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText name="mobile" label="手机号码" 
                    placeholder="请输入手机号码" width="sm" 
          required />
      <ProFormSelect name="party" label="所在党派" 
                    placeholder="选择党派" width="sm" 
          options={getOptionsFormValueEnum(partyEnum)} 
          allowClear={false} />      
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect name="education" label="&nbsp;&nbsp;&nbsp;最后学历" 
                    placeholder="选择学历" width="sm"
          options={getOptionsFormValueEnum(educationEnum)} 
          allowClear={false} />
        <ProFormSelect name="degree" label="最高学位" 
                    placeholder="选择学位"  width="sm"
          options={getOptionsFormValueEnum(degreeEnum)} 
          allowClear={false} />          
      </ProForm.Group>
      <ProFormText name="email" label="&nbsp;&nbsp;&nbsp;邮件地址" 
                    placeholder="请输入e-maill地址" width="md" />
      </ModalForm>

  注意：上面我们有意忽略了salary字段的内容。

现在对话框应该是这个样子

4.3.2 按规则校验输入的内容

新建立一个文件src/utils/form-validator.ts，内容如下

import {Rule} from 'rc-field-form/es/interface'
export const fieldRuls:{[key: string]: Rule[]}={
  required: [
    {
      required: true,
      whitespace: true,
      message: '此项为必填项',
    },
  ],
  requiredDate: [
    {
      required: true,
      whitespace: true,
      type: 'date',
      message: '此项为必填项',
    },
  ],
  mobile: [
    {
      required: false,
      pattern: new RegExp(/^1[3-9]\d{9}$/, "g"),
      message: '请输入正确的手机号码'
    },
  ],
  captcha: [
    {
      required: false,
      pattern: new RegExp(/^\d{6}$/, "g"),
      message: '验证码是6位数字'
    },
  ],
  identity: [
    {
      required: false,
      pattern: new RegExp(/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, "g"),
      message: '请输入正确的身份证号码'
    },
  ],
  email: [
    {
      required: false,
      pattern: new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "g"),
      message: '请输入正确的电子邮件地址'
    },
  ],  
}

显然，这些规则是可以在其他模块中复用的通用定义。

在对话框中引用它

import { fieldRuls } from '@/utils/form-validator'

现在给几个需要校验的字段定义规则

        <ProFormText name="realName" label="会员姓名" 
                    placeholder="请输入会员真实姓名" width="sm" 
+         rules={fieldRuls['required']}
-                  required
        />
        <ProFormText name="identityNumber" label="身份证号" 
                    placeholder="请输入身份证号码" width="sm"
+         rules={[...fieldRuls['required'], ...fieldRuls['identity']]} 
-         required 
        />
        <ProFormText name="mobile" label="手机号码" 
                    placeholder="请输入手机号码" width="sm" 
+         rules={[...fieldRuls['required'], ...fieldRuls['mobile']]}
-         required 
        />
      <ProFormText name="email" label="&nbsp;&nbsp;&nbsp;邮件地址" 
                    placeholder="请输入e-maill地址" width="md" 
+         rules={fieldRuls['email']}
      />

上面的代码中我们删除了required属性，这是因为如果规则里面定义了required，那么在渲染的时候会自动加上标记。

下面是这些规则工作的效果

4.3.3 必填日期型数据的校验规则

参照上面的定义方法，我们把出生日期也定义为必填内容，但实际运行会发现总是无法通过校验

出现这种情况的原因在于没有在校验规则中定义数据类型——校验规则默认数据类型为string，而日期组件的数据类型是date，因此无法通过校验。解决这个问题有两种做法：
1. 直接定义校验规则

          rules={[{
            required: true,
            whitespace: true,
            type: 'date',
            message: '出生日期为必填项',
          }]}

1. 在utils/form-validator.ts中专门为日期定义一个通用规则

    requiredDate: [
      {
        required: true,
        whitespace: true,
        type: 'date',
        message: '此项为必填项',
      },
    ],

        <ProFormDatePicker name="birthday" label="出生日期" 
                    width="sm" allowClear={false}
          rules={fieldRuls['requiredDate']}
        />

   4.3.4 动态限制可以输入的字符

   用规则对内容进行校验的时机是内容被录入（或改变）以后。有些时候我们会希望用户不能录入无效的字符，比如不可以在手机号码输入框中输入字符和多余11个的字符。这个功能可以通过form中各字段的normalize属性定义来实现。

首先在新建立一个文件src/utils/form-validator.ts中定义如下内容

export const fidleNormalizes={
  mobile: (value:string, prevValue:string) => {
    let nextValue = value?.replace(/[^\d]+/g, '')
    if(value?.length > 11)
      nextValue =  prevValue
    return nextValue
  },
  identity: (value:string, prevValue:string) => {
    let nextValue = value?.replace(/[^(\d|x|X)]+/g, '')
    if(value?.length > 18)
      nextValue =  prevValue
    return nextValue?.toUpperCase()
  },
  phone: (value:string, prevValue:string) => {
    let nextValue = value?.replace(/[^(\d|\-)]+/g, '')
    return nextValue
  },
  digit: (value:string, prevValue:string) => {
    let nextValue = value?.replace(/[^\d]+/g, '')
    return nextValue
  }
}

增加引用

import { fieldRuls, fidleNormalizes } from '@/utils/form-validator'

然后给几个需要限制的字段加上属性

        <ProFormText name="identityNumber" label="身份证号" 
                    placeholder="请输入身份证号码" width="sm"
          rules={fieldRuls['identity']}
+         normalize={fidleNormalizes['identity']}
          required />
        <ProFormText name="mobile" label="手机号码" 
                    placeholder="请输入手机号码" width="sm" 
          rules={fieldRuls['mobile']}
+         normalize={fidleNormalizes['mobile']}
          required />

完成这些设置以后，在身份证那里就只能输入数字和字母x，在手机号那里只能输入数字，并且两处的最大长度也被限制了。超长或者不允许的字符都会被自动丢弃。

4.4 发起更新数据的网络请求并模拟效果

4.4.1 增加网络请求函数

在src/services/api/member.ts中增加执行更新的网络请求函数

export async function updateMember(data: any) {
  return request('/api/member/update', {
    method: 'POST',
    data: {
      ...data
    }
  });
}

4.4.2 在对话框中调用更新函数

增加引用

import { updateMember } from "@/services/api/member";

修改handleResponse和onFinish函数

  const handleResponse = (sucess:boolean) => {
    doClose(sucess);
  };
    const onFinish = async (value:any) => {    
    let result = {
      id: record.id,
      ...value,
    }
    try {
      await updateMember(result);
      message.success('保存成功，即将刷新',1);
      handleResponse(true);
    } catch (error) {
      handleResponse(false);
    }
  };

4.4.3 模拟更新数据

在mock/member.ts中模拟完整更新数据

function update(req: Request, res: Response, u: string) {
  const index = memberListDataSource.findIndex((member) => {
    return member.id === req.body.id
  } )
  const result = {
    success: true,
    errorCode: -1,
  }
  if(index >= 0) {
    Object.assign(memberListDataSource[index],req.body)
  } else {
    result.success = false
    result.errorCode = 2
  }
  return res.json(result);
}
export default {
  'POST /api/member/update': update,

4.4.4 在成功更新后重新加载对话框

修改src/pages/MemberList/index.tsx中的doClose函数，当成功更新后重新加载对话框以反应最新的修改

        doClose={(needReload=false) => {
          setFormState({ showModal: false, operation: '', record: {}})
          if(needReload) {
            actionRef.current?.reloadAndRest?.();
          }
        }}

现在应该可以看到完整的更新数据内容的效果。

4.5 不保存未修改过的数据

到这里我们基本上完成了更新数据的功能，但还有一个需要优化的地方，那就是当用户没有做任何修改而直接点击确定的时候，不应该发起网络请求。本节就来解决这个问题

首先在对话框中增加对stateHook的引用

import { useEffect, useState } from "react";

然后在对话框组件中定义一个State Hook

  const [dataChanged,setDataChanged] = useState<boolean>(false)

接下来修改onFinish函数的定义

  const onFinish = async (value:any) => {   
    if(dataChanged) {
      let result = {
        id: record.id,
        ...value,
      }
      try {
        await updateMember(result);
        message.success('保存成功，即将刷新',1);
        handleResponse(true);
      } catch (error) {
        handleResponse(false);
      }
    } else {
      message.success('没有改动，直接退出了',1);
      handleResponse(false);
    }
  };

最后给ModalForm增加onValuesChange属性

    <ModalForm
      onValuesChange={() => {
        if(!dataChanged) 
          setDataChanged(true)
      }}

现在如果不改动内容而点击确定，对话框会直接关闭并且给出提示。

4.6 增加重置功能

我们来给对话框增加一个“重置”按钮，点击它的时候把全部数据重置为修改前的内容，并且清除修改标记。

首先引用antd的Button

import { message, Form, Button } from "antd";

然后修改默认按钮的文字并给对话框增加属性

    <ModalForm
            submitter={{
        searchConfig: {
          submitText: '保存',
          resetText: '取消',
        },
        render: (props, defaultDoms) => {
          return [
            ...defaultDoms,
            <Button
              key="extra-reset"
              onClick={() => {
                const { form } = props
                form?.setFieldsValue(record)
                setDataChanged(false)
              }}
            >
              重置
            </Button>,
          ];
        },
      }}

4.7 关闭烦人的自动完成功能

默认情况下，浏览器会给所有输入框打开“自动完成”（autoComplete）功能，这个貌似出于友好理由的功能其实会给录入数据的人带来很大的麻烦，因此在实际的项目中最好声明关闭这个功能。具体的做法是给所有的输入框加上autoComplete = ‘off’的属性，根据组件的不同，方法有所区别：

<Input autoComplete="off">
<ProFormText fieldProps ={{ autoComplete:"off" }}>

4.8 小结

本章涉及的的内容非常多，而官方文档又极其的语焉不详，所以一定要按照本章的内容逐步完成每个步骤，并且确实理解每条语句的作用，一定不要简单的复制粘贴。

下面是和本章相关的重要链接：

• Ant Design 组件相关文档 https://ant.design/components/overview-cn/
• ProForm高级表单相关文档 https://procomponents.ant.design/components/form/
• ProFormFields表单项 https://procomponents.ant.design/components/field-set
• 异步校验器 https://github.com/yiminghe/async-validator#user-content-type

版权说明：本文由北京朗思云网科技股份有限公司原创，向互联网开放全部内容但保留所有权力。.