对 Ant Design 定制和使用表单的总结

从今年的 4 月份开始拥有了我踏入 Web 行业以来第一份正式工作，到现在已经过去三个月之久了。这三个月我不仅仅把它当成一份单纯的工作，因为知道自己技术尚浅，只能疯狂的吸收那些自己从来没听过的技术名词，一边慢慢摸索着，一边巩固着自己已经掌握的知识，今天就把近三个月来比较做的较为深刻的时间记录下来。

通过尝试 H5 项目，巩固 Web 基础知识

在拿到第一份工作的时候，我感到开心的同时，又深感忐忑。毕竟一份新的工作带来的是一份新的项目，虽然我对当前所学知识的掌握，是有一定的信心。我比较担心的是我的开发进度是否可以跟得上，如果遇到我暂时还未掌握的知识盲区我该怎样应对呢？我带着这样的心态开发了我的第一个 H5 项目。

具体的详细情况，这里就不在详细记录了，总归结果是，花了一周的时间开发了一个微信小程序，尽管当时功能并不完全，但是在计划之内。而且在我看来当时时间绝对谈不上是充分。我很意外在这样的要求下，我竟然没有一丝的紧张，每天有条不紊的，开发一个又一个页面。此时我非常非常的庆幸，我在过去几个月里并不只是单纯的学习理论知识，我在 GitHub 开源项目中，和帮助津津乐道团队开发一些小功能的经历给我带来了我自己都意想不到的收获。我几乎不需要负责人告诉我一个页面需要怎么去设计，就可以完成一个又一个开发任务。我不觉得我做的很完美，但是我一定没有拖后腿。这是我在开源社区学习以来，另一件让我深感开心的一件事。更加坚定了我，想花更多的一些时间投入到开源社区中去。

开发 H5 项目，我学到的更多的是巩固我已经掌握的知识，并加以灵活运用它们。不需要考虑他们在电脑端的布局，让我写起来更加的得心应手，放飞自我～唯一有一些遗憾的是可能当时项目时间比较紧张一些，我未能接受更多前后端搭配的工作，可能是因为接口已经写好，上面又着急要，我只是简单写了写类型之类的。不过开发期间我我比较开心的是，我学到了 Ant Design 组件的定制化。之前用 Ant Design 组件库的时候发现自己写的 CSS 文件不能应用到组件，查看文档也一直没有去深究。

• Ant Design 定制

1
2
3
4
5
6
7
8
9
10
11

<!-- 之前导入 CSS 文件的方式 -->
import styles from './index.less';

<div className={styles.XXX}></div>


<!-- 定制化 Ant Design 时用的 CSS 导入方式 -->
import './index.less';

<!-- CSS 文件使用 Class 选择器的方式即可-->
.am-action-sheet {}

注意，同时导入两份文件时，名字不可重复！当然了，如果全局使用的话，直接在全局 CSS 文件书写即可。

B 端项目-表单

表单是我一直没有深入了解的知识区，刚开始学习 Web 项目时，对这部分是既好奇，又困惑，为什么用户提交的数据可以存起来，存到哪里去了呢？前端页面中表单提交之后，数据是怎样发送给后端的呢？在我心中早就困惑了很久的问题终于在这次开发过程中，让我如愿以偿的掌握了它。我着手开发了一个具有三个步骤的大开户表单，发送给后端接口的数据也都是需要经过处理的，嗯，没错，尽管在一些资深大佬面前，这根本不算什么，但是对当前的我来说，拿来练手再好不过了。着手就开始干！

首先需要确定的是该页面工程化设计，没错，绝对得清晰可读。

表单的排版布局没什么可说的，这里记录下整个过程中，我学到的新的技能。

• 整个表单写完之后，我开始调整数据，这里让我长了个记性，开发过程中，一定要确认，了解清楚后端需要的数据格式。

我发送的数据：

1
2
3
4
5
6

{
  A: '',
  B: '',
  C: '',
  ...
}

接口需要的数据类型：

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  A: '',
  B: '',
  C: {
    C-1: '',
    C-2: '',
  }
  D: {
    D-1: '',
    D-2: '',
  }
  ...
}

好在这里让我熟练掌握了结构赋值和对象的新增属性。自己亲自动手尝试之后才是真的学到了。

• 数据格式的处理

1
2
3

const data = form2.getFieldsValue(true);
const { legal_validity_begin_time, legal_validity_end_time, agency_validity_begin_time, agency_validity_end_time, ...newData } = data
newFormData.person_info = newData;

• 数据类型的处理（字符串拼接，时间戳转换等）

1
2

newData.legal_validity_begin = parseInt(new Date(legal_validity_begin_time).getTime().toString().slice(0, 10));
newFormData.bus_addr = `${bus_addr_City}${bus_addr_Province}${bus_addr_detail}`;

• 提交前数据的校验

1
2
3
4

<!-- 用到了 Ant Design 表单的 API -->
form3.validateFields().then(() => {
  <!-- 检验数据之后，整理数据格式然后向后端发送数据 -->
})

• 数据的本地存储

1

window.localStorage.setItem('formData', JSON.stringify(data));

小节

开发过程中发现，React 使用三元判断法选择性的渲染 Dom 节点时，每次状态更新，旧的 Dom 是被直接干掉了，并不会保留，与 Vue 的渲染方式不同，所以在表单进行动态渲染时，Dom 节点信息更新时，旧 Dom 的状态会丢失。场景如：在用户选择上传身份证正反面图片，还是选择上传复印件的场景中，上传过图片之后来回切换选择时。

总结

开发完成后，看到数据成功的发送到后端，心里还是很激动的。尽管之后测试时，遇到了一小部分的 BUG ，修复这些 BUG 的同时，又加深了我对 React 和 Ant Design 的掌握。因为太久没更新博客，导致想写的东西太多啦，今天就先把这两部分的内容记录下来～

前不久刚把博客页搭起来，这下总算有了经常更新优化内容的动力～（哥们说不好看，看来得再找时间调研调研，再更新更新喽）我知道我还需要学习很多很多的知识，因为比大部分人都学的晚，所以只能更加细心，有计划的来学习。到今天我才对时间的安排有了非常深刻的认识。我也很庆幸，我还有时间，有精力来学习它。怎么说呢，趁年轻，好好努力把！