写点什么

Mock 平台 -08 开发:项目管理(四)编辑功能和 Component 抽离

作者:MegaQi
  • 2022 年 8 月 10 日
    上海
  • 本文字数:5895 字

    阅读完需:约 19 分钟

Mock平台-08开发:项目管理(四)编辑功能和Component抽离

【Mock 平台】为系列测试开发教程,从 0 到 1 编码带你一步步使用 Spring Boot 和 Antd React 框架完成搭建一个测试工具平台,希望作为一个实战项目对各位的测试开发学习之路有帮助,大奇一个专注测试技术干货原创与分享的家伙。


本篇重点:继续基于项目增加所有用到的 Form 和 Modal 两个组件做一些深化,实现项目管理的编辑功能,并将代码进行合并优化,提取第一个自定义的 component 组件。

1.项目编辑功能

要实现项目编辑对话框,需要拿到对应行的项目详细信息,可以通过在点击行按钮时候将整行信息传入,即之前 table 配置列信息时候操作列 render: (text, record) => ()中的 record 数据,但如果你返回的列表不不是所有字段,那就需要拿到行对应 ID,通过查询接口拿到详细信息保存到一个定义好的变量中。


我们这里项目信息比较简单,所以采用前者,定义一个详细信息变量、编辑点击事件,并注意需要将之前定义在外部 projectColumns 挪到Project(...)主体内,让其正确调用内部新定义的方法。


const Project = () => {  // 迁移列到内部,并添加editAction方法透传record  const projectColumns = [      {dataIndex:"id",title:"编号",},      ...省略...      {dataIndex:"option",title:"操作",        render: (text, record) => (          <Space>            <a onClick={()=>editAction(record)}>编辑</a>            <a>删除</a>          </Space>        ),      },    ]        // 定义项目编辑操作,并动态赋值到新的详细项目变量  const [projectInfo, setProjectInfo] = useState({});  const editAction = (record) => {    setProjectInfo(record);  }}
复制代码


在实现编辑对话框表单之前需要了解如何初始化数据,从 Form 组件官方 API 可以查看到其initialValues 可以绑定初始信息,值与 name 直接匹配,也可以在 Form.Item 中initialValue独立绑定,好处是可以做些计算、转换再初始化。


参考上篇添加逻辑,拷贝一份 Modal+Form 修改其文案,并添加一个 ID 项(禁止编辑状态),再做个整体数据绑定操作,其中先不做保存修改操作,一份去了重的代码参考如下:


  // 控制显示编辑项目对话框表单  const [projectEditVisible, setProjectEditVisible] = useState(false);
... 省略部分... <Modal id="p_edit" title="项目修改" visible={projectEditVisible} destroyOnClose="true" onCancel={()=>setProjectEditVisible(false)} onOk={() => { // 暂时不实现接口操作,先看交互是否满足 }} > <Form initialValues={projectInfo} > <Form.Item name='id' label='编号'> <Input disabled></Input> </Form.Item> <Form.Item name='name' label='名称' rules={[ { required: true, message: '项目名称为必填项!', }, ]} > <Input placeholder="请输入项目名称"></Input> </Form.Item> <Form.Item name='owner' label='负责人'> <Input placeholder="项目相负责人"></Input> </Form.Item> <Form.Item name="desc" label="更多信息"> <TextArea/> </Form.Item> </Form> </Modal>
复制代码


几个关键的代码增加后,运行看下效果,并进行测试,编辑的对话框表单的弹出和显示,数据初始化都正常,但是反填的数据只是第一次选中行的数据,即时已经设置了 destroyOnClose关闭对话框销毁子元素也无效。



经查找官方组件 API 下边有这样的说明:


你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。


也就是要想动态的替换是需要使用 setFieldsValue来实现,在此交互场景下 initialValues/initialValue 更适合新增时候一些默认数据绑定。改动给出 diff 代码块如下。


const [formEditProject] = Form.useForm();- //const [projectInfo, setProjectInfo] = useState({});
const editAction = (record) => {- // setProjectInfo(record);+ formEditProject.setFieldsValue(record); setProjectEditVisible(true);}
<Form+ form={formEditProject}- // initialValues={projectInfo}>
复制代码


具体改动点涉及:


  • 定义 useForm Hook 并绑定编辑 Form;

  • 点击编辑按钮无需再赋予 projectInfo,直接调用表单 setFieldsValue 动态赋值。


由于在之实现后端项目保存的时候其增加/修改都是一个接口,唯一的增量是编辑带原始 ID,所以保存接口代码参考增加的 onOK,请求参数里增加个 ID 字段,其他对应改成编辑 modal 绑定的变量。


onOk={() => {  formEditProject    .validateFields()    .then(async (values) => {    const data = {      id: values.id,      name: values.name,      owner: values.owner,      desc: values.desc,      type: 'public',      operator: '大奇'    }    const resp = await saveProduct(data);    if (resp.success) {      formEditProject.resetFields();       setProjectEditVisible(false);      reloadProjectList();    }  })    .catch((info) => {    console.log('修改项目信息失败', info);  });}}
复制代码


五处改动点分别为formEditProjectid: values.idformEditProject.resetFields();setProjectEditVisible(false);console.log('修改项目信息失败', info);

带上这部分代码,重新编译做个测试,看下效果。



至此项目管理的增加和修改的数据交互操作,通过最基本 Modal+Form 组件已经实现了。类似这类字段较少的数据保存交互都可以通过这种方式实现了。

2.编写 Component

随着应用的发展,会需要在多个页面分享 UI 元素 (或在一个页面使用多次),或是在一个 tsx 逻辑代码太多,这种情况下就可以把这部分抽成 component 。

我们来编写一个 UpsertProject component,再将增加和修改合并,这样就将大幅优化代码。

按照之前 Template 里的例子,新建 src/pages/Project/components/UpsertProject.tsx 文件:


import React, { useState } from 'react';
/* 抽离出来的组件,用于优化页面代码 */const UpsertProject = (props) => { return ( <> </> )}
export default UpsertProject;
复制代码


2.1 编码 index.jsx

为了保留历史参考代码,增改组件的提取将全部定义新变量,源代码中将注释掉,如果是本地测试开发的话完全可以直接删掉。这里再想一个问题,在之前实现的新增和修改 Modal+Form 其实将近 90%代码重复,所以我们可以将其合并,不同的部分通过条件判断进行逻辑操作和动态赋值。因此我们在 src/pages/Project/index.jsx 有如下新定义:


  // Components 需要留在上级的变量(重新定义原有的将注释掉)  const [upsertVisible, setUpsertVisible] = useState(false); //控制抽离的组件显隐  const [upsertAction, setUpsertAction] = useState('ADD'); // 标记组件的动作默认增加  const [upsertDetail, setUpsertDetail] = useState({}); // 编辑动作下选择行详细信息
复制代码


对应的也需要修改组件引用、涉及到增加和修改方法逻辑:


  • 原有 p_add 和 p_edit 可以全部删掉,使用新的组件

  • 新的组件里会用一些变量和方法直接透传

  • 修改 addAction 添加按钮方法逻辑,标记动作为 ADD 并设置状态显示

  • 修改 editAction 表操作列,标记动作为 EDIT,赋值编辑行详细信息,同样设置状态显示


import UpsertProject from "@/pages/Project/components/UpsertProject";
const addAction = () => { // setProjectVisible(true); setUpsertAction("ADD"); setUpsertVisible(true); }
const editAction = (record) => { // setProjectInfo(record); // formEditProject.setFieldsValue(record); // setProjectEditVisible(true); setUpsertDetail(record); setUpsertAction('EDIT'); setUpsertVisible(true); }
return ( <> <Button ...省略... > 项目添加 </Button> {/*原来的增加和修改Modal都可以删掉了, 引入抽离的组件*/}
<UpsertProject upsertAction={upsertAction} upsertVisible={upsertVisible} setUpsertVisible={setUpsertVisible} upsertDetail={upsertDetail} reloadProjectList={reloadProjectList} /> <Table ...省略... /> </>)
复制代码


如果对比原 index.jsx 文件,代码量的减少直观让可阅读和逻辑性更好。

2.2 组件 UpsertProject

接下来就要真正实现 UpsertProject 组件 内部逻辑了,基本上将 p_edit 的代码拷贝过来,然后额外进行页面渲染初始化逻辑判断,以及动态判断动作赋值和组件的显示隐藏,详细的解释请参考如下完整代码。其中有两个新知识点说明移步到下文 useEffect 和 hidden 学习。


import React, { useEffect, useState } from "react";import { Form, Input, Modal } from "antd";const { TextArea } = Input;
import { saveProduct } from "@/pages/Project/service";
/* 抽离出来的组件,用于优化页面代码 */const UpsertProject = (props) => { const [form] = Form.useForm();
// 副作用钩子,给定一个参数,当props内容有变化是执行此Hook useEffect(()=>{ if(props.upsertAction==='EDIT'){ form.setFieldsValue(props.upsertDetail); } else { form.resetFields(); } },[props]) //
return ( <Modal title={props.upsertAction==='ADD'?'增加项目':'修改项目'} // 动态判断标题 visible={props.upsertVisible} destroyOnClose onCancel={()=>props.setUpsertVisible(false)} onOk={() => { form .validateFields() .then(async (values) => { const data = { id: props.upsertAction==='ADD'? undefined: values.id, // 根据增加还是修改给定id值 name: values.name, owner: values.owner, desc: values.desc, type: 'public', operator: '大奇' } const resp = await saveProduct(data); if (resp.success) { form.resetFields(); // 表单清除历史 props.setUpsertVisible(false); props.reloadProjectList(); } }) .catch((info) => { console.log('保存项目信息失败', info); }); }} > <Form form={form}> {/*通过hidden属性决定是否隐藏此项目,在新增操作时候隐藏*/} <Form.Item hidden={props.upsertAction==='ADD'} name='id' label='编号'> <Input disabled></Input> </Form.Item> <Form.Item name='name' label='名称' rules={[ { required: true, message: '项目名称为必填项!', }, ]} > <Input placeholder="请输入项目名称"></Input> </Form.Item> <Form.Item name='owner' label='负责人'> <Input placeholder="项目相负责人"></Input> </Form.Item> <Form.Item name="desc" label="更多信息"> <TextArea/> </Form.Item> </Form> </Modal> )}
export default UpsertProject;
复制代码


2.3 集成测试

完成所有代码编写后,做个集成集成测试,强调一下笔者在边开发边总结文档的过程是一点点测试过来,非一次编码后才进行测试的,这里受于文章的排版才这样做的。


测试 1:对话框显隐和赋值


  • Case1: 验证对话框弹出和关闭正常

  • Case2: 项目添加表单为空

  • Case3: 项目编辑值正确初始化



测试 2:添加和修改保存操作


  • Case1: 验证项目新增保存成功

  • Case2: 验证项目修改保存成功

  • Case3: 保存成功后关闭对话框不刷新项目 Table



3. useEffect 和 hidden

对于上自定义组件代码涉及到几个新出现的知识点,分别简单讲解下。

3.1 钩子 useEffect

为了实现项目增改组件数据的初始化,引入 useEffect 钩子, 可看作是 React 中 componentDidMountcomponentDidUpdatecomponentWillUnmount 几个声明周期的组合,这里主要的目的当透传的值有变化的时候,触发这个周期 Hook,实现根据upsertAction判断是新增还是编辑操作,如果编辑使其表单动态初始化值,否则保持表单为空。


https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect


useEffect 传递两个参数,第一个参数是逻辑处理函数,第二个参数是一个数组,其中


  • 如果参数二存放变量,当数组存放变量发生改变时,第一个参数,逻辑处理函数将会被执行;

  • 如果参数二不传,浏览器会无线循环执行逻辑处理函数;

  • 如果参数二传空数组[],相当于挂在完成后执行一次。

3.2 组件隐藏 Hidden

在 React 没有像 Vue 那种 v-if 的语法糖,在处理组件根据条件是否渲染的时候,比较正规的处理方式是写个函数定义组件,例如如下用法:显示那种按钮和文案根据给定值动态返回。


const showButton= (state) => {  if (state==='OPEN'){    return <Button type='link'>CLOSE</Button>  } else {    return <Button>OPEN</Button>  }}
<div>{showButton("OPEN")}</div>
复制代码


但对于本篇中的仅是根据某种条件隐藏编号表单项即可,经验证有一种简单的用法,即大部分官方组件有 Hidden 的属性,所以我们值需要为这个隐藏字段赋予逻辑值 true 或 false 就能控制是否显示。比如代码中根据操作动作来确定此项目是否显示。


 <Form.Item hidden={props.upsertAction==='ADD'} name='id' label='编号'>    <Input disabled></Input></Form.Item>
复制代码


至此通过详细的讲解和演示实践,完成了项目管理的增加和编辑需求开发,学习开发过程成中,是否遇到什么问题呢?如果需要帮助和交流的可以加我,我尽量在时间允许的情况下回复你,一同探讨学习、动手实战,一起踏实成长。

发布于: 刚刚阅读数: 3
用户头像

MegaQi

关注

自信人生两百年,会当击水三千里。 2018.02.15 加入

分享一些系列测试平台开发教程,也记录一些自己研究的技术,遇到的问题,总之想分享一些干货内容,愿给这个行业贡献微不足道的力量,不断突破不断成长。

评论

发布
暂无评论
Mock平台-08开发:项目管理(四)编辑功能和Component抽离_8月月更_MegaQi_InfoQ写作社区