详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路 ...

袋鼠云数栈从2016年发布第⼀个版本开始，就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化和性能升级。
在数栈过去的产品迭代中受限于当前组件的版本，积累了很多待解决的问题，随着新的功能需求不断增加，很多原先的组件以及交互设计需要进行优化。
2月，伴随着数栈 UI5.0 的焕新升级，数栈前端团队一起将组件框架 antd 从 v3.x 升级到了 v4.x，更新组件的 UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来产品功能迭代的需求。
本文将总结归纳袋鼠云数栈前端框架Antd 从3.x 升级到4.x 的相关步骤，及在这个过程中踩过的坑，解决的问题。
兼容性问题

第三方依赖兼容问题

· React - 最低 v16.9，部分组件使用 hooks 重构 （ react 升级相关文档：https://sourl.cn/6bM4Ep）
· Less - 最低 v3.1.0，建议升级到 less 4.x；
· @ant-design/icons-antd - 不再内置 Icon 组件，请使用独立的包。
对 3.x 的兼容性处理

或许是考虑到部分组件升级的毁坏性，antd4.x 中依然保留了对 3.x 版本的兼容，废弃的组件通过 @ant-design/compatible 保持兼容，例如 Icon、Form。
注意：建议 @ant-design/compatible 仅在升级过程中稍作依赖，升级 4.x 请完全剔除对该过渡包的依赖。
升级步骤

只有一步

@ant-design/codemod-v4 自带升级脚本，会自动替换代码。

1. # 通过 npx 直接运行
2. npx -p @ant-design/codemod-v4 antd4-codemod apps/xxxx
4. # 或者全局安装
5. # 使用 npm
6. npm i -g @ant-design/codemod-v4
7. # 或者使用 yarn
8. yarn global add @ant-design/codemod-v4
10. # 运行
11. antd4-codemod src

复制代码

注意：该命令和脚本只会进行代码替换，不会进行 AntD 的版本升级，需要手动将其升级至4.22.5。

1. 该命令完成的工作：
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem><FormItem
13.   label="过滤条件"
14.   extra={
15.     <Tooltip title={customSystemParams}>
16.       系统参数配置 
17.        <QuestionCircleOutlined />
18.      </Tooltip>
19.    }
20. >
21.   <Input.TextArea />
22. </FormItem>1. 将 Form 与 Mention 组件通过 @ant-design/compatible 包引入
23. <FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem><FormItem
34.   label="过滤条件"
35.   extra={
36.     <Tooltip title={customSystemParams}>
37.       系统参数配置 
38.        <QuestionCircleOutlined />
39.      </Tooltip>
40.    }
41. >
42.   <Input.TextArea />
43. </FormItem>2. 用新的 @ant-design/icons 替换字符串类型的 icon 属性值
44. <FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem>3. 将 Icon 组件 + type =“” 通过 @ant-design/icons 引入
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem>4. 将 v3 LocaleProvider 组件转换成 v4 ConfigProvider 组件
86. <FormItem
87.   label="过滤条件"
88.   extra={
89.     <Tooltip title={customSystemParams}>
90.       系统参数配置 
91.        <QuestionCircleOutlined />
92.      </Tooltip>
93.    }
94. >
95.   <Input.TextArea />
96. </FormItem><FormItem
97.   label="过滤条件"
98.   extra={
99.     <Tooltip title={customSystemParams}>
100.       系统参数配置 
101.        <QuestionCircleOutlined />
102.      </Tooltip>
103.    }
104. >
105.   <Input.TextArea />
106. </FormItem>5. 将 Modal.method() 中字符串 icon 属性的调用转换成从 @ant-design/icons 中引入

复制代码

antd4-codemod


上图这类报错是 Icon 组件自动替换错误，有 2 种处理方式：
· 报错文件的 Icon 比较少的情况，可以直接手动替换该文件中的 Icon 组件，具体替换成 Icon 中的哪个组件可以根据 type 在 Icon 文档中找（ Icon文档：https://sourl.cn/neHBVS ）；
· 下图中是具体报错的节点，可以看到 JSXSpreadAttribute 节点也就是拓展运算符中没有 name 属性，所以把 Icon 组件的拓展运算符改一下再执行替换脚本就可以了。

antd4 问题修复

styled-components

styled-components 依赖需要转换写法。

Icon

不要使用兼容包的 icon。
在 3.x 版本中，Icon 会全量引入所有 svg 图标文件，增加了打包产物；
在 4.x 版本中，对 Icon 进行了按需加载，将每个 svg 封装成一个组件。
注意：antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。
· 使用

1. import { Icon } from 'antd';
2. mport { SmileOutlined } from '@ant-design/icons';
4. const Demo = () => (
5. <FormItem
6.   label="过滤条件"
7.   extra={
8.     <Tooltip title={customSystemParams}>
9.       系统参数配置 
10.        <QuestionCircleOutlined />
11.      </Tooltip>
12.    }
13. >
14.   <Input.TextArea />
15. </FormItem>
16. <FormItem
17.   label="过滤条件"
18.   extra={
19.     <Tooltip title={customSystemParams}>
20.       系统参数配置 
21.        <QuestionCircleOutlined />
22.      </Tooltip>
23.    }
24. >
25.   <Input.TextArea />
26. </FormItem><FormItem
27.   label="过滤条件"
28.   extra={
29.     <Tooltip title={customSystemParams}>
30.       系统参数配置 
31.        <QuestionCircleOutlined />
32.      </Tooltip>
33.    }
34. >
35.   <Input.TextArea />
36. </FormItem> <Icon type="smile" />
37. <FormItem
38.   label="过滤条件"
39.   extra={
40.     <Tooltip title={customSystemParams}>
41.       系统参数配置 
42.        <QuestionCircleOutlined />
43.      </Tooltip>
44.    }
45. >
46.   <Input.TextArea />
47. </FormItem><FormItem
48.   label="过滤条件"
49.   extra={
50.     <Tooltip title={customSystemParams}>
51.       系统参数配置 
52.        <QuestionCircleOutlined />
53.      </Tooltip>
54.    }
55. >
56.   <Input.TextArea />
57. </FormItem> <SmileOutlined />
58. <FormItem
59.   label="过滤条件"
60.   extra={
61.     <Tooltip title={customSystemParams}>
62.       系统参数配置 
63.        <QuestionCircleOutlined />
64.      </Tooltip>
65.    }
66. >
67.   <Input.TextArea />
68. </FormItem><FormItem
69.   label="过滤条件"
70.   extra={
71.     <Tooltip title={customSystemParams}>
72.       系统参数配置 
73.        <QuestionCircleOutlined />
74.      </Tooltip>
75.    }
76. >
77.   <Input.TextArea />
78. </FormItem> <Button icon={<SmileOutlined />} />
79. <FormItem
80.   label="过滤条件"
81.   extra={
82.     <Tooltip title={customSystemParams}>
83.       系统参数配置 
84.        <QuestionCircleOutlined />
85.      </Tooltip>
86.    }
87. >
88.   <Input.TextArea />
89. </FormItem>
90. );

复制代码

· 兼容

1. import { Icon } from '@ant-design/compatible';
2. const Demo = () => (
3. <FormItem
4.   label="过滤条件"
5.   extra={
6.     <Tooltip title={customSystemParams}>
7.       系统参数配置 
8.        <QuestionCircleOutlined />
9.      </Tooltip>
10.    }
11. >
12.   <Input.TextArea />
13. </FormItem>
14. <FormItem
15.   label="过滤条件"
16.   extra={
17.     <Tooltip title={customSystemParams}>
18.       系统参数配置 
19.        <QuestionCircleOutlined />
20.      </Tooltip>
21.    }
22. >
23.   <Input.TextArea />
24. </FormItem><FormItem
25.   label="过滤条件"
26.   extra={
27.     <Tooltip title={customSystemParams}>
28.       系统参数配置 
29.        <QuestionCircleOutlined />
30.      </Tooltip>
31.    }
32. >
33.   <Input.TextArea />
34. </FormItem><Icon type="smile" />
35. <FormItem
36.   label="过滤条件"
37.   extra={
38.     <Tooltip title={customSystemParams}>
39.       系统参数配置 
40.        <QuestionCircleOutlined />
41.      </Tooltip>
42.    }
43. >
44.   <Input.TextArea />
45. </FormItem><FormItem
46.   label="过滤条件"
47.   extra={
48.     <Tooltip title={customSystemParams}>
49.       系统参数配置 
50.        <QuestionCircleOutlined />
51.      </Tooltip>
52.    }
53. >
54.   <Input.TextArea />
55. </FormItem><Button icon="smile" />
56. <FormItem
57.   label="过滤条件"
58.   extra={
59.     <Tooltip title={customSystemParams}>
60.       系统参数配置 
61.        <QuestionCircleOutlined />
62.      </Tooltip>
63.    }
64. >
65.   <Input.TextArea />
66. </FormItem>
67. );

复制代码

Form

antd Form 从 v3 到 v4：https://sourl.cn/7TiRfp
● Form.create()
在 3.x 中，表单中任意一项的修改，都会导致 Form.create() 包裹的表单重新渲染，造成性能消耗；
在 4.x 中，Form.create() 不再使用。
如果需要使用 form 的 api，例如 setFieldsValue 等，需要通过 Form.useForm() 创建 Form 实体进行操作。
· 函数组件写法

1. // antd v4
2. const Demo = () => {
3. <FormItem
4.   label="过滤条件"
5.   extra={
6.     <Tooltip title={customSystemParams}>
7.       系统参数配置 
8.        <QuestionCircleOutlined />
9.      </Tooltip>
10.    }
11. >
12.   <Input.TextArea />
13. </FormItem>const [form] = Form.useForm();
15. <FormItem
16.   label="过滤条件"
17.   extra={
18.     <Tooltip title={customSystemParams}>
19.       系统参数配置 
20.        <QuestionCircleOutlined />
21.      </Tooltip>
22.    }
23. >
24.   <Input.TextArea />
25. </FormItem>React.useEffect(() => {
26. <FormItem
27.   label="过滤条件"
28.   extra={
29.     <Tooltip title={customSystemParams}>
30.       系统参数配置 
31.        <QuestionCircleOutlined />
32.      </Tooltip>
33.    }
34. >
35.   <Input.TextArea />
36. </FormItem><FormItem
37.   label="过滤条件"
38.   extra={
39.     <Tooltip title={customSystemParams}>
40.       系统参数配置 
41.        <QuestionCircleOutlined />
42.      </Tooltip>
43.    }
44. >
45.   <Input.TextArea />
46. </FormItem>form.setFieldsValue({
47. <FormItem
48.   label="过滤条件"
49.   extra={
50.     <Tooltip title={customSystemParams}>
51.       系统参数配置 
52.        <QuestionCircleOutlined />
53.      </Tooltip>
54.    }
55. >
56.   <Input.TextArea />
57. </FormItem><FormItem
58.   label="过滤条件"
59.   extra={
60.     <Tooltip title={customSystemParams}>
61.       系统参数配置 
62.        <QuestionCircleOutlined />
63.      </Tooltip>
64.    }
65. >
66.   <Input.TextArea />
67. </FormItem><FormItem
68.   label="过滤条件"
69.   extra={
70.     <Tooltip title={customSystemParams}>
71.       系统参数配置 
72.        <QuestionCircleOutlined />
73.      </Tooltip>
74.    }
75. >
76.   <Input.TextArea />
77. </FormItem>username: 'Bamboo',
78. <FormItem
79.   label="过滤条件"
80.   extra={
81.     <Tooltip title={customSystemParams}>
82.       系统参数配置 
83.        <QuestionCircleOutlined />
84.      </Tooltip>
85.    }
86. >
87.   <Input.TextArea />
88. </FormItem><FormItem
89.   label="过滤条件"
90.   extra={
91.     <Tooltip title={customSystemParams}>
92.       系统参数配置 
93.        <QuestionCircleOutlined />
94.      </Tooltip>
95.    }
96. >
97.   <Input.TextArea />
98. </FormItem>});
99. <FormItem
100.   label="过滤条件"
101.   extra={
102.     <Tooltip title={customSystemParams}>
103.       系统参数配置 
104.        <QuestionCircleOutlined />
105.      </Tooltip>
106.    }
107. >
108.   <Input.TextArea />
109. </FormItem>}, []);
111. <FormItem
112.   label="过滤条件"
113.   extra={
114.     <Tooltip title={customSystemParams}>
115.       系统参数配置 
116.        <QuestionCircleOutlined />
117.      </Tooltip>
118.    }
119. >
120.   <Input.TextArea />
121. </FormItem>return (
122. <FormItem
123.   label="过滤条件"
124.   extra={
125.     <Tooltip title={customSystemParams}>
126.       系统参数配置 
127.        <QuestionCircleOutlined />
128.      </Tooltip>
129.    }
130. >
131.   <Input.TextArea />
132. </FormItem><FormItem
133.   label="过滤条件"
134.   extra={
135.     <Tooltip title={customSystemParams}>
136.       系统参数配置 
137.        <QuestionCircleOutlined />
138.      </Tooltip>
139.    }
140. >
141.   <Input.TextArea />
142. </FormItem><Form form={form} {...props}> ... </Form>
143. <FormItem
144.   label="过滤条件"
145.   extra={
146.     <Tooltip title={customSystemParams}>
147.       系统参数配置 
148.        <QuestionCircleOutlined />
149.      </Tooltip>
150.    }
151. >
152.   <Input.TextArea />
153. </FormItem>)
154. };

复制代码

· 如果是 class component，也可以通过 ref 获取

1. class Demo extends React.Component {
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>formRef = React.createRef();
14. <FormItem
15.   label="过滤条件"
16.   extra={
17.     <Tooltip title={customSystemParams}>
18.       系统参数配置 
19.        <QuestionCircleOutlined />
20.      </Tooltip>
21.    }
22. >
23.   <Input.TextArea />
24. </FormItem>componentDidMount() {
25. <FormItem
26.   label="过滤条件"
27.   extra={
28.     <Tooltip title={customSystemParams}>
29.       系统参数配置 
30.        <QuestionCircleOutlined />
31.      </Tooltip>
32.    }
33. >
34.   <Input.TextArea />
35. </FormItem><FormItem
36.   label="过滤条件"
37.   extra={
38.     <Tooltip title={customSystemParams}>
39.       系统参数配置 
40.        <QuestionCircleOutlined />
41.      </Tooltip>
42.    }
43. >
44.   <Input.TextArea />
45. </FormItem>this.formRef.current.setFieldsValue({
46. <FormItem
47.   label="过滤条件"
48.   extra={
49.     <Tooltip title={customSystemParams}>
50.       系统参数配置 
51.        <QuestionCircleOutlined />
52.      </Tooltip>
53.    }
54. >
55.   <Input.TextArea />
56. </FormItem><FormItem
57.   label="过滤条件"
58.   extra={
59.     <Tooltip title={customSystemParams}>
60.       系统参数配置 
61.        <QuestionCircleOutlined />
62.      </Tooltip>
63.    }
64. >
65.   <Input.TextArea />
66. </FormItem><FormItem
67.   label="过滤条件"
68.   extra={
69.     <Tooltip title={customSystemParams}>
70.       系统参数配置 
71.        <QuestionCircleOutlined />
72.      </Tooltip>
73.    }
74. >
75.   <Input.TextArea />
76. </FormItem>username: 'Bamboo',
77. <FormItem
78.   label="过滤条件"
79.   extra={
80.     <Tooltip title={customSystemParams}>
81.       系统参数配置 
82.        <QuestionCircleOutlined />
83.      </Tooltip>
84.    }
85. >
86.   <Input.TextArea />
87. </FormItem><FormItem
88.   label="过滤条件"
89.   extra={
90.     <Tooltip title={customSystemParams}>
91.       系统参数配置 
92.        <QuestionCircleOutlined />
93.      </Tooltip>
94.    }
95. >
96.   <Input.TextArea />
97. </FormItem>});
98. <FormItem
99.   label="过滤条件"
100.   extra={
101.     <Tooltip title={customSystemParams}>
102.       系统参数配置 
103.        <QuestionCircleOutlined />
104.      </Tooltip>
105.    }
106. >
107.   <Input.TextArea />
108. </FormItem>}
110. <FormItem
111.   label="过滤条件"
112.   extra={
113.     <Tooltip title={customSystemParams}>
114.       系统参数配置 
115.        <QuestionCircleOutlined />
116.      </Tooltip>
117.    }
118. >
119.   <Input.TextArea />
120. </FormItem>render() {
121. <FormItem
122.   label="过滤条件"
123.   extra={
124.     <Tooltip title={customSystemParams}>
125.       系统参数配置 
126.        <QuestionCircleOutlined />
127.      </Tooltip>
128.    }
129. >
130.   <Input.TextArea />
131. </FormItem><FormItem
132.   label="过滤条件"
133.   extra={
134.     <Tooltip title={customSystemParams}>
135.       系统参数配置 
136.        <QuestionCircleOutlined />
137.      </Tooltip>
138.    }
139. >
140.   <Input.TextArea />
141. </FormItem>return (
142. <FormItem
143.   label="过滤条件"
144.   extra={
145.     <Tooltip title={customSystemParams}>
146.       系统参数配置 
147.        <QuestionCircleOutlined />
148.      </Tooltip>
149.    }
150. >
151.   <Input.TextArea />
152. </FormItem><FormItem
153.   label="过滤条件"
154.   extra={
155.     <Tooltip title={customSystemParams}>
156.       系统参数配置 
157.        <QuestionCircleOutlined />
158.      </Tooltip>
159.    }
160. >
161.   <Input.TextArea />
162. </FormItem><FormItem
163.   label="过滤条件"
164.   extra={
165.     <Tooltip title={customSystemParams}>
166.       系统参数配置 
167.        <QuestionCircleOutlined />
168.      </Tooltip>
169.    }
170. >
171.   <Input.TextArea />
172. </FormItem><Form ref={this.formRef}>
173. <FormItem
174.   label="过滤条件"
175.   extra={
176.     <Tooltip title={customSystemParams}>
177.       系统参数配置 
178.        <QuestionCircleOutlined />
179.      </Tooltip>
180.    }
181. >
182.   <Input.TextArea />
183. </FormItem><FormItem
184.   label="过滤条件"
185.   extra={
186.     <Tooltip title={customSystemParams}>
187.       系统参数配置 
188.        <QuestionCircleOutlined />
189.      </Tooltip>
190.    }
191. >
192.   <Input.TextArea />
193. </FormItem><FormItem
194.   label="过滤条件"
195.   extra={
196.     <Tooltip title={customSystemParams}>
197.       系统参数配置 
198.        <QuestionCircleOutlined />
199.      </Tooltip>
200.    }
201. >
202.   <Input.TextArea />
203. </FormItem><FormItem
204.   label="过滤条件"
205.   extra={
206.     <Tooltip title={customSystemParams}>
207.       系统参数配置 
208.        <QuestionCircleOutlined />
209.      </Tooltip>
210.    }
211. >
212.   <Input.TextArea />
213. </FormItem><Form.Item name="username" rules={[{ required: true }]}>
214. <FormItem
215.   label="过滤条件"
216.   extra={
217.     <Tooltip title={customSystemParams}>
218.       系统参数配置 
219.        <QuestionCircleOutlined />
220.      </Tooltip>
221.    }
222. >
223.   <Input.TextArea />
224. </FormItem><FormItem
225.   label="过滤条件"
226.   extra={
227.     <Tooltip title={customSystemParams}>
228.       系统参数配置 
229.        <QuestionCircleOutlined />
230.      </Tooltip>
231.    }
232. >
233.   <Input.TextArea />
234. </FormItem><FormItem
235.   label="过滤条件"
236.   extra={
237.     <Tooltip title={customSystemParams}>
238.       系统参数配置 
239.        <QuestionCircleOutlined />
240.      </Tooltip>
241.    }
242. >
243.   <Input.TextArea />
244. </FormItem><FormItem
245.   label="过滤条件"
246.   extra={
247.     <Tooltip title={customSystemParams}>
248.       系统参数配置 
249.        <QuestionCircleOutlined />
250.      </Tooltip>
251.    }
252. >
253.   <Input.TextArea />
254. </FormItem><FormItem
255.   label="过滤条件"
256.   extra={
257.     <Tooltip title={customSystemParams}>
258.       系统参数配置 
259.        <QuestionCircleOutlined />
260.      </Tooltip>
261.    }
262. >
263.   <Input.TextArea />
264. </FormItem><Input />
265. <FormItem
266.   label="过滤条件"
267.   extra={
268.     <Tooltip title={customSystemParams}>
269.       系统参数配置 
270.        <QuestionCircleOutlined />
271.      </Tooltip>
272.    }
273. >
274.   <Input.TextArea />
275. </FormItem><FormItem
276.   label="过滤条件"
277.   extra={
278.     <Tooltip title={customSystemParams}>
279.       系统参数配置 
280.        <QuestionCircleOutlined />
281.      </Tooltip>
282.    }
283. >
284.   <Input.TextArea />
285. </FormItem><FormItem
286.   label="过滤条件"
287.   extra={
288.     <Tooltip title={customSystemParams}>
289.       系统参数配置 
290.        <QuestionCircleOutlined />
291.      </Tooltip>
292.    }
293. >
294.   <Input.TextArea />
295. </FormItem><FormItem
296.   label="过滤条件"
297.   extra={
298.     <Tooltip title={customSystemParams}>
299.       系统参数配置 
300.        <QuestionCircleOutlined />
301.      </Tooltip>
302.    }
303. >
304.   <Input.TextArea />
305. </FormItem></Form.Item>
306. <FormItem
307.   label="过滤条件"
308.   extra={
309.     <Tooltip title={customSystemParams}>
310.       系统参数配置 
311.        <QuestionCircleOutlined />
312.      </Tooltip>
313.    }
314. >
315.   <Input.TextArea />
316. </FormItem><FormItem
317.   label="过滤条件"
318.   extra={
319.     <Tooltip title={customSystemParams}>
320.       系统参数配置 
321.        <QuestionCircleOutlined />
322.      </Tooltip>
323.    }
324. >
325.   <Input.TextArea />
326. </FormItem><FormItem
327.   label="过滤条件"
328.   extra={
329.     <Tooltip title={customSystemParams}>
330.       系统参数配置 
331.        <QuestionCircleOutlined />
332.      </Tooltip>
333.    }
334. >
335.   <Input.TextArea />
336. </FormItem></Form>
337. <FormItem
338.   label="过滤条件"
339.   extra={
340.     <Tooltip title={customSystemParams}>
341.       系统参数配置 
342.        <QuestionCircleOutlined />
343.      </Tooltip>
344.    }
345. >
346.   <Input.TextArea />
347. </FormItem><FormItem
348.   label="过滤条件"
349.   extra={
350.     <Tooltip title={customSystemParams}>
351.       系统参数配置 
352.        <QuestionCircleOutlined />
353.      </Tooltip>
354.    }
355. >
356.   <Input.TextArea />
357. </FormItem>);
358. <FormItem
359.   label="过滤条件"
360.   extra={
361.     <Tooltip title={customSystemParams}>
362.       系统参数配置 
363.        <QuestionCircleOutlined />
364.      </Tooltip>
365.    }
366. >
367.   <Input.TextArea />
368. </FormItem>}
369. }

复制代码

当我们使用 From.create() 的时候，可能会传入参数，做数据处理，例如：

1. export const FilterForm: any = Form.create<Props>({
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>onValuesChange: (props, changedValues, allValues) => {
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem>const { onChange } = props;
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem>onChange(allValues);
55. <FormItem
56.   label="过滤条件"
57.   extra={
58.     <Tooltip title={customSystemParams}>
59.       系统参数配置 
60.        <QuestionCircleOutlined />
61.      </Tooltip>
62.    }
63. >
64.   <Input.TextArea />
65. </FormItem>},
66. })(Filter);

复制代码

由于 Form.create 的删除，需要放到 < Form> 中。

1. <Form
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>ref={this.formRef}
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem>layout="vertical"
24. <FormItem
25.   label="过滤条件"
26.   extra={
27.     <Tooltip title={customSystemParams}>
28.       系统参数配置 
29.        <QuestionCircleOutlined />
30.      </Tooltip>
31.    }
32. >
33.   <Input.TextArea />
34. </FormItem>className="meta_form"
35. <FormItem
36.   label="过滤条件"
37.   extra={
38.     <Tooltip title={customSystemParams}>
39.       系统参数配置 
40.        <QuestionCircleOutlined />
41.      </Tooltip>
42.    }
43. >
44.   <Input.TextArea />
45. </FormItem>onValuesChange={(_, allValues) => {
46. <FormItem
47.   label="过滤条件"
48.   extra={
49.     <Tooltip title={customSystemParams}>
50.       系统参数配置 
51.        <QuestionCircleOutlined />
52.      </Tooltip>
53.    }
54. >
55.   <Input.TextArea />
56. </FormItem><FormItem
57.   label="过滤条件"
58.   extra={
59.     <Tooltip title={customSystemParams}>
60.       系统参数配置 
61.        <QuestionCircleOutlined />
62.      </Tooltip>
63.    }
64. >
65.   <Input.TextArea />
66. </FormItem>const { onChange } = this.props;
67. <FormItem
68.   label="过滤条件"
69.   extra={
70.     <Tooltip title={customSystemParams}>
71.       系统参数配置 
72.        <QuestionCircleOutlined />
73.      </Tooltip>
74.    }
75. >
76.   <Input.TextArea />
77. </FormItem><FormItem
78.   label="过滤条件"
79.   extra={
80.     <Tooltip title={customSystemParams}>
81.       系统参数配置 
82.        <QuestionCircleOutlined />
83.      </Tooltip>
84.    }
85. >
86.   <Input.TextArea />
87. </FormItem>onChange(allValues);
88. <FormItem
89.   label="过滤条件"
90.   extra={
91.     <Tooltip title={customSystemParams}>
92.       系统参数配置 
93.        <QuestionCircleOutlined />
94.      </Tooltip>
95.    }
96. >
97.   <Input.TextArea />
98. </FormItem>}}
99. >

复制代码

● getFieldDecorator
在 4.x 中，不在需要 getFieldDecorator 对 Item 进行包裹。注意以下问题：
· 将之前写在 getFieldDecorator 中的 name/rules 等移到属性中；
· 初始化在 form 中处理，避免同名字段冲突问题；
· 关于表单联动的问题，官方提供了 shouldUpdate 方法。

1. const Demo = () => (
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem><Form initialValues={{ username: 'yuwan' }}>
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem><Form.Item name="username" rules={[{ required: true }]}>
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem><Input />
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem></Form.Item>
86. <FormItem
87.   label="过滤条件"
88.   extra={
89.     <Tooltip title={customSystemParams}>
90.       系统参数配置 
91.        <QuestionCircleOutlined />
92.      </Tooltip>
93.    }
94. >
95.   <Input.TextArea />
96. </FormItem></Form>
97. );

复制代码

● initialValue
· 历史问题
initialValue 从字面意来看，就是初始值 defaultValue，但是可能会有部分同学使用他的时候会误以为 initialValue 等同于 value。造成这样的误解是因为在 3.x 的版本中，一直存在一个很神奇的问题，受控组件的值会跟随 initialValue 改变。
看下面的例子，点击 button 修改 username, input 框的 value 也会随之改变。

1. const Demo = ({ form: { getFieldDecorator } }) => (
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>const [username, setUsername] = useState('');
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem>const handleValueChange = () => {
24. <FormItem
25.   label="过滤条件"
26.   extra={
27.     <Tooltip title={customSystemParams}>
28.       系统参数配置 
29.        <QuestionCircleOutlined />
30.      </Tooltip>
31.    }
32. >
33.   <Input.TextArea />
34. </FormItem><FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem>setUsername('yuwan');
45. <FormItem
46.   label="过滤条件"
47.   extra={
48.     <Tooltip title={customSystemParams}>
49.       系统参数配置 
50.        <QuestionCircleOutlined />
51.      </Tooltip>
52.    }
53. >
54.   <Input.TextArea />
55. </FormItem>}
56. <FormItem
57.   label="过滤条件"
58.   extra={
59.     <Tooltip title={customSystemParams}>
60.       系统参数配置 
61.        <QuestionCircleOutlined />
62.      </Tooltip>
63.    }
64. >
65.   <Input.TextArea />
66. </FormItem>return (
67. <FormItem
68.   label="过滤条件"
69.   extra={
70.     <Tooltip title={customSystemParams}>
71.       系统参数配置 
72.        <QuestionCircleOutlined />
73.      </Tooltip>
74.    }
75. >
76.   <Input.TextArea />
77. </FormItem><FormItem
78.   label="过滤条件"
79.   extra={
80.     <Tooltip title={customSystemParams}>
81.       系统参数配置 
82.        <QuestionCircleOutlined />
83.      </Tooltip>
84.    }
85. >
86.   <Input.TextArea />
87. </FormItem><Fragment>
88. <FormItem
89.   label="过滤条件"
90.   extra={
91.     <Tooltip title={customSystemParams}>
92.       系统参数配置 
93.        <QuestionCircleOutlined />
94.      </Tooltip>
95.    }
96. >
97.   <Input.TextArea />
98. </FormItem><FormItem
99.   label="过滤条件"
100.   extra={
101.     <Tooltip title={customSystemParams}>
102.       系统参数配置 
103.        <QuestionCircleOutlined />
104.      </Tooltip>
105.    }
106. >
107.   <Input.TextArea />
108. </FormItem><FormItem
109.   label="过滤条件"
110.   extra={
111.     <Tooltip title={customSystemParams}>
112.       系统参数配置 
113.        <QuestionCircleOutlined />
114.      </Tooltip>
115.    }
116. >
117.   <Input.TextArea />
118. </FormItem><Form>
119. <FormItem
120.   label="过滤条件"
121.   extra={
122.     <Tooltip title={customSystemParams}>
123.       系统参数配置 
124.        <QuestionCircleOutlined />
125.      </Tooltip>
126.    }
127. >
128.   <Input.TextArea />
129. </FormItem><FormItem
130.   label="过滤条件"
131.   extra={
132.     <Tooltip title={customSystemParams}>
133.       系统参数配置 
134.        <QuestionCircleOutlined />
135.      </Tooltip>
136.    }
137. >
138.   <Input.TextArea />
139. </FormItem><FormItem
140.   label="过滤条件"
141.   extra={
142.     <Tooltip title={customSystemParams}>
143.       系统参数配置 
144.        <QuestionCircleOutlined />
145.      </Tooltip>
146.    }
147. >
148.   <Input.TextArea />
149. </FormItem><FormItem
150.   label="过滤条件"
151.   extra={
152.     <Tooltip title={customSystemParams}>
153.       系统参数配置 
154.        <QuestionCircleOutlined />
155.      </Tooltip>
156.    }
157. >
158.   <Input.TextArea />
159. </FormItem><Form.Item>
160. <FormItem
161.   label="过滤条件"
162.   extra={
163.     <Tooltip title={customSystemParams}>
164.       系统参数配置 
165.        <QuestionCircleOutlined />
166.      </Tooltip>
167.    }
168. >
169.   <Input.TextArea />
170. </FormItem><FormItem
171.   label="过滤条件"
172.   extra={
173.     <Tooltip title={customSystemParams}>
174.       系统参数配置 
175.        <QuestionCircleOutlined />
176.      </Tooltip>
177.    }
178. >
179.   <Input.TextArea />
180. </FormItem><FormItem
181.   label="过滤条件"
182.   extra={
183.     <Tooltip title={customSystemParams}>
184.       系统参数配置 
185.        <QuestionCircleOutlined />
186.      </Tooltip>
187.    }
188. >
189.   <Input.TextArea />
190. </FormItem><FormItem
191.   label="过滤条件"
192.   extra={
193.     <Tooltip title={customSystemParams}>
194.       系统参数配置 
195.        <QuestionCircleOutlined />
196.      </Tooltip>
197.    }
198. >
199.   <Input.TextArea />
200. </FormItem><FormItem
201.   label="过滤条件"
202.   extra={
203.     <Tooltip title={customSystemParams}>
204.       系统参数配置 
205.        <QuestionCircleOutlined />
206.      </Tooltip>
207.    }
208. >
209.   <Input.TextArea />
210. </FormItem>{getFieldDecorator('username', {
211. <FormItem
212.   label="过滤条件"
213.   extra={
214.     <Tooltip title={customSystemParams}>
215.       系统参数配置 
216.        <QuestionCircleOutlined />
217.      </Tooltip>
218.    }
219. >
220.   <Input.TextArea />
221. </FormItem><FormItem
222.   label="过滤条件"
223.   extra={
224.     <Tooltip title={customSystemParams}>
225.       系统参数配置 
226.        <QuestionCircleOutlined />
227.      </Tooltip>
228.    }
229. >
230.   <Input.TextArea />
231. </FormItem><FormItem
232.   label="过滤条件"
233.   extra={
234.     <Tooltip title={customSystemParams}>
235.       系统参数配置 
236.        <QuestionCircleOutlined />
237.      </Tooltip>
238.    }
239. >
240.   <Input.TextArea />
241. </FormItem><FormItem
242.   label="过滤条件"
243.   extra={
244.     <Tooltip title={customSystemParams}>
245.       系统参数配置 
246.        <QuestionCircleOutlined />
247.      </Tooltip>
248.    }
249. >
250.   <Input.TextArea />
251. </FormItem><FormItem
252.   label="过滤条件"
253.   extra={
254.     <Tooltip title={customSystemParams}>
255.       系统参数配置 
256.        <QuestionCircleOutlined />
257.      </Tooltip>
258.    }
259. >
260.   <Input.TextArea />
261. </FormItem><FormItem
262.   label="过滤条件"
263.   extra={
264.     <Tooltip title={customSystemParams}>
265.       系统参数配置 
266.        <QuestionCircleOutlined />
267.      </Tooltip>
268.    }
269. >
270.   <Input.TextArea />
271. </FormItem> initialValue: username,
272. <FormItem
273.   label="过滤条件"
274.   extra={
275.     <Tooltip title={customSystemParams}>
276.       系统参数配置 
277.        <QuestionCircleOutlined />
278.      </Tooltip>
279.    }
280. >
281.   <Input.TextArea />
282. </FormItem><FormItem
283.   label="过滤条件"
284.   extra={
285.     <Tooltip title={customSystemParams}>
286.       系统参数配置 
287.        <QuestionCircleOutlined />
288.      </Tooltip>
289.    }
290. >
291.   <Input.TextArea />
292. </FormItem><FormItem
293.   label="过滤条件"
294.   extra={
295.     <Tooltip title={customSystemParams}>
296.       系统参数配置 
297.        <QuestionCircleOutlined />
298.      </Tooltip>
299.    }
300. >
301.   <Input.TextArea />
302. </FormItem><FormItem
303.   label="过滤条件"
304.   extra={
305.     <Tooltip title={customSystemParams}>
306.       系统参数配置 
307.        <QuestionCircleOutlined />
308.      </Tooltip>
309.    }
310. >
311.   <Input.TextArea />
312. </FormItem><FormItem
313.   label="过滤条件"
314.   extra={
315.     <Tooltip title={customSystemParams}>
316.       系统参数配置 
317.        <QuestionCircleOutlined />
318.      </Tooltip>
319.    }
320. >
321.   <Input.TextArea />
322. </FormItem><FormItem
323.   label="过滤条件"
324.   extra={
325.     <Tooltip title={customSystemParams}>
326.       系统参数配置 
327.        <QuestionCircleOutlined />
328.      </Tooltip>
329.    }
330. >
331.   <Input.TextArea />
332. </FormItem> rules: [{ required: true }],
333. <FormItem
334.   label="过滤条件"
335.   extra={
336.     <Tooltip title={customSystemParams}>
337.       系统参数配置 
338.        <QuestionCircleOutlined />
339.      </Tooltip>
340.    }
341. >
342.   <Input.TextArea />
343. </FormItem><FormItem
344.   label="过滤条件"
345.   extra={
346.     <Tooltip title={customSystemParams}>
347.       系统参数配置 
348.        <QuestionCircleOutlined />
349.      </Tooltip>
350.    }
351. >
352.   <Input.TextArea />
353. </FormItem><FormItem
354.   label="过滤条件"
355.   extra={
356.     <Tooltip title={customSystemParams}>
357.       系统参数配置 
358.        <QuestionCircleOutlined />
359.      </Tooltip>
360.    }
361. >
362.   <Input.TextArea />
363. </FormItem><FormItem
364.   label="过滤条件"
365.   extra={
366.     <Tooltip title={customSystemParams}>
367.       系统参数配置 
368.        <QuestionCircleOutlined />
369.      </Tooltip>
370.    }
371. >
372.   <Input.TextArea />
373. </FormItem><FormItem
374.   label="过滤条件"
375.   extra={
376.     <Tooltip title={customSystemParams}>
377.       系统参数配置 
378.        <QuestionCircleOutlined />
379.      </Tooltip>
380.    }
381. >
382.   <Input.TextArea />
383. </FormItem>})(<Input />)}
384. <FormItem
385.   label="过滤条件"
386.   extra={
387.     <Tooltip title={customSystemParams}>
388.       系统参数配置 
389.        <QuestionCircleOutlined />
390.      </Tooltip>
391.    }
392. >
393.   <Input.TextArea />
394. </FormItem><FormItem
395.   label="过滤条件"
396.   extra={
397.     <Tooltip title={customSystemParams}>
398.       系统参数配置 
399.        <QuestionCircleOutlined />
400.      </Tooltip>
401.    }
402. >
403.   <Input.TextArea />
404. </FormItem><FormItem
405.   label="过滤条件"
406.   extra={
407.     <Tooltip title={customSystemParams}>
408.       系统参数配置 
409.        <QuestionCircleOutlined />
410.      </Tooltip>
411.    }
412. >
413.   <Input.TextArea />
414. </FormItem><FormItem
415.   label="过滤条件"
416.   extra={
417.     <Tooltip title={customSystemParams}>
418.       系统参数配置 
419.        <QuestionCircleOutlined />
420.      </Tooltip>
421.    }
422. >
423.   <Input.TextArea />
424. </FormItem></Form.Item>
425. <FormItem
426.   label="过滤条件"
427.   extra={
428.     <Tooltip title={customSystemParams}>
429.       系统参数配置 
430.        <QuestionCircleOutlined />
431.      </Tooltip>
432.    }
433. >
434.   <Input.TextArea />
435. </FormItem><FormItem
436.   label="过滤条件"
437.   extra={
438.     <Tooltip title={customSystemParams}>
439.       系统参数配置 
440.        <QuestionCircleOutlined />
441.      </Tooltip>
442.    }
443. >
444.   <Input.TextArea />
445. </FormItem><FormItem
446.   label="过滤条件"
447.   extra={
448.     <Tooltip title={customSystemParams}>
449.       系统参数配置 
450.        <QuestionCircleOutlined />
451.      </Tooltip>
452.    }
453. >
454.   <Input.TextArea />
455. </FormItem></Form>
456. <FormItem
457.   label="过滤条件"
458.   extra={
459.     <Tooltip title={customSystemParams}>
460.       系统参数配置 
461.        <QuestionCircleOutlined />
462.      </Tooltip>
463.    }
464. >
465.   <Input.TextArea />
466. </FormItem><FormItem
467.   label="过滤条件"
468.   extra={
469.     <Tooltip title={customSystemParams}>
470.       系统参数配置 
471.        <QuestionCircleOutlined />
472.      </Tooltip>
473.    }
474. >
475.   <Input.TextArea />
476. </FormItem><FormItem
477.   label="过滤条件"
478.   extra={
479.     <Tooltip title={customSystemParams}>
480.       系统参数配置 
481.        <QuestionCircleOutlined />
482.      </Tooltip>
483.    }
484. >
485.   <Input.TextArea />
486. </FormItem><Button onClick={handleValueChange}>Change</Button>
487. <FormItem
488.   label="过滤条件"
489.   extra={
490.     <Tooltip title={customSystemParams}>
491.       系统参数配置 
492.        <QuestionCircleOutlined />
493.      </Tooltip>
494.    }
495. >
496.   <Input.TextArea />
497. </FormItem><FormItem
498.   label="过滤条件"
499.   extra={
500.     <Tooltip title={customSystemParams}>
501.       系统参数配置 
502.        <QuestionCircleOutlined />
503.      </Tooltip>
504.    }
505. >
506.   <Input.TextArea />
507. </FormItem></Fragment>
508. <FormItem
509.   label="过滤条件"
510.   extra={
511.     <Tooltip title={customSystemParams}>
512.       系统参数配置 
513.        <QuestionCircleOutlined />
514.      </Tooltip>
515.    }
516. >
517.   <Input.TextArea />
518. </FormItem>)
519. );
521. const WrappedDemo = Form.create()(Demo);

复制代码

但当 input 框被编辑过，initialValue 和 input 的绑定效果就消失了，正确的做法应该是通过 setFieldsVlaue 方法去 set 值。
· 4.x 版本的 initialValue
在 4.x，antd 团队已经把这个 bug 给解了，并且一是为了 name 重名问题，二是再次强调其初始值的功能，现在提到 Form 中了。当然，如果继续写在 Form. Item 中也是可以的，但需要注意优先级。
● shouldUpdate
前面有说过，form 表单不再会因为表单内部某个值的改变而重新渲染整个结构，而设有 shouldUpdate 为 true 的 Item，任意变化都会使该 Form. Item 重新渲染。
它会接收 render props，从而允许你对此进行控制。这里稍微注意一下，请勿在设置 shouldUpdate 的外层 Form. Item 上添加 name， 否则，你会得到一个 error。

1. <Form.Item shouldUpdate={(prev, next) => prev.name !== next.name}>
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>{form => form.getFieldValue('name') === 'antd' && (
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem><Form.Item name="version">
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem><Input />
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem></Form.Item>
86. <FormItem
87.   label="过滤条件"
88.   extra={
89.     <Tooltip title={customSystemParams}>
90.       系统参数配置 
91.        <QuestionCircleOutlined />
92.      </Tooltip>
93.    }
94. >
95.   <Input.TextArea />
96. </FormItem>)}
97. </Form.Item>

复制代码

在使用 shouldUpdate 的时候，需要在第一个 Form.Item 上加上 noStyle，否则就会出现下面这种留白占位的情况。

● validateTrigger
onBlur 时不再修改选中值，且返回 React 原生的 event 对象。如果你在使用兼容包的 Form 且配置了 validateTrigger 为 onBlur ，请改至 onChange 以做兼容。
● validator
在 antd3 时，我们使用 callback 返回报错。但是 antd4 对此做了修改，自定义校验，接收 Promise 作为返回值。示例参考如下：

· antd3 的写法

1. <FormItem label="具体时间" {...formItemLayout}>
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>{getFieldDecorator('specificTime', {
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem>rules: [
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem>{
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem><FormItem
86.   label="过滤条件"
87.   extra={
88.     <Tooltip title={customSystemParams}>
89.       系统参数配置 
90.        <QuestionCircleOutlined />
91.      </Tooltip>
92.    }
93. >
94.   <Input.TextArea />
95. </FormItem><FormItem
96.   label="过滤条件"
97.   extra={
98.     <Tooltip title={customSystemParams}>
99.       系统参数配置 
100.        <QuestionCircleOutlined />
101.      </Tooltip>
102.    }
103. >
104.   <Input.TextArea />
105. </FormItem>required: true,
106. <FormItem
107.   label="过滤条件"
108.   extra={
109.     <Tooltip title={customSystemParams}>
110.       系统参数配置 
111.        <QuestionCircleOutlined />
112.      </Tooltip>
113.    }
114. >
115.   <Input.TextArea />
116. </FormItem><FormItem
117.   label="过滤条件"
118.   extra={
119.     <Tooltip title={customSystemParams}>
120.       系统参数配置 
121.        <QuestionCircleOutlined />
122.      </Tooltip>
123.    }
124. >
125.   <Input.TextArea />
126. </FormItem><FormItem
127.   label="过滤条件"
128.   extra={
129.     <Tooltip title={customSystemParams}>
130.       系统参数配置 
131.        <QuestionCircleOutlined />
132.      </Tooltip>
133.    }
134. >
135.   <Input.TextArea />
136. </FormItem><FormItem
137.   label="过滤条件"
138.   extra={
139.     <Tooltip title={customSystemParams}>
140.       系统参数配置 
141.        <QuestionCircleOutlined />
142.      </Tooltip>
143.    }
144. >
145.   <Input.TextArea />
146. </FormItem>validator: (_, value, callback) => {
147. <FormItem
148.   label="过滤条件"
149.   extra={
150.     <Tooltip title={customSystemParams}>
151.       系统参数配置 
152.        <QuestionCircleOutlined />
153.      </Tooltip>
154.    }
155. >
156.   <Input.TextArea />
157. </FormItem><FormItem
158.   label="过滤条件"
159.   extra={
160.     <Tooltip title={customSystemParams}>
161.       系统参数配置 
162.        <QuestionCircleOutlined />
163.      </Tooltip>
164.    }
165. >
166.   <Input.TextArea />
167. </FormItem><FormItem
168.   label="过滤条件"
169.   extra={
170.     <Tooltip title={customSystemParams}>
171.       系统参数配置 
172.        <QuestionCircleOutlined />
173.      </Tooltip>
174.    }
175. >
176.   <Input.TextArea />
177. </FormItem><FormItem
178.   label="过滤条件"
179.   extra={
180.     <Tooltip title={customSystemParams}>
181.       系统参数配置 
182.        <QuestionCircleOutlined />
183.      </Tooltip>
184.    }
185. >
186.   <Input.TextArea />
187. </FormItem><FormItem
188.   label="过滤条件"
189.   extra={
190.     <Tooltip title={customSystemParams}>
191.       系统参数配置 
192.        <QuestionCircleOutlined />
193.      </Tooltip>
194.    }
195. >
196.   <Input.TextArea />
197. </FormItem>if (!value || !value.hour || !value.min) {
198. <FormItem
199.   label="过滤条件"
200.   extra={
201.     <Tooltip title={customSystemParams}>
202.       系统参数配置 
203.        <QuestionCircleOutlined />
204.      </Tooltip>
205.    }
206. >
207.   <Input.TextArea />
208. </FormItem><FormItem
209.   label="过滤条件"
210.   extra={
211.     <Tooltip title={customSystemParams}>
212.       系统参数配置 
213.        <QuestionCircleOutlined />
214.      </Tooltip>
215.    }
216. >
217.   <Input.TextArea />
218. </FormItem><FormItem
219.   label="过滤条件"
220.   extra={
221.     <Tooltip title={customSystemParams}>
222.       系统参数配置 
223.        <QuestionCircleOutlined />
224.      </Tooltip>
225.    }
226. >
227.   <Input.TextArea />
228. </FormItem><FormItem
229.   label="过滤条件"
230.   extra={
231.     <Tooltip title={customSystemParams}>
232.       系统参数配置 
233.        <QuestionCircleOutlined />
234.      </Tooltip>
235.    }
236. >
237.   <Input.TextArea />
238. </FormItem><FormItem
239.   label="过滤条件"
240.   extra={
241.     <Tooltip title={customSystemParams}>
242.       系统参数配置 
243.        <QuestionCircleOutlined />
244.      </Tooltip>
245.    }
246. >
247.   <Input.TextArea />
248. </FormItem><FormItem
249.   label="过滤条件"
250.   extra={
251.     <Tooltip title={customSystemParams}>
252.       系统参数配置 
253.        <QuestionCircleOutlined />
254.      </Tooltip>
255.    }
256. >
257.   <Input.TextArea />
258. </FormItem> return callback('具体时间不可为空');
259. <FormItem
260.   label="过滤条件"
261.   extra={
262.     <Tooltip title={customSystemParams}>
263.       系统参数配置 
264.        <QuestionCircleOutlined />
265.      </Tooltip>
266.    }
267. >
268.   <Input.TextArea />
269. </FormItem><FormItem
270.   label="过滤条件"
271.   extra={
272.     <Tooltip title={customSystemParams}>
273.       系统参数配置 
274.        <QuestionCircleOutlined />
275.      </Tooltip>
276.    }
277. >
278.   <Input.TextArea />
279. </FormItem><FormItem
280.   label="过滤条件"
281.   extra={
282.     <Tooltip title={customSystemParams}>
283.       系统参数配置 
284.        <QuestionCircleOutlined />
285.      </Tooltip>
286.    }
287. >
288.   <Input.TextArea />
289. </FormItem><FormItem
290.   label="过滤条件"
291.   extra={
292.     <Tooltip title={customSystemParams}>
293.       系统参数配置 
294.        <QuestionCircleOutlined />
295.      </Tooltip>
296.    }
297. >
298.   <Input.TextArea />
299. </FormItem><FormItem
300.   label="过滤条件"
301.   extra={
302.     <Tooltip title={customSystemParams}>
303.       系统参数配置 
304.        <QuestionCircleOutlined />
305.      </Tooltip>
306.    }
307. >
308.   <Input.TextArea />
309. </FormItem>}
310. <FormItem
311.   label="过滤条件"
312.   extra={
313.     <Tooltip title={customSystemParams}>
314.       系统参数配置 
315.        <QuestionCircleOutlined />
316.      </Tooltip>
317.    }
318. >
319.   <Input.TextArea />
320. </FormItem><FormItem
321.   label="过滤条件"
322.   extra={
323.     <Tooltip title={customSystemParams}>
324.       系统参数配置 
325.        <QuestionCircleOutlined />
326.      </Tooltip>
327.    }
328. >
329.   <Input.TextArea />
330. </FormItem><FormItem
331.   label="过滤条件"
332.   extra={
333.     <Tooltip title={customSystemParams}>
334.       系统参数配置 
335.        <QuestionCircleOutlined />
336.      </Tooltip>
337.    }
338. >
339.   <Input.TextArea />
340. </FormItem><FormItem
341.   label="过滤条件"
342.   extra={
343.     <Tooltip title={customSystemParams}>
344.       系统参数配置 
345.        <QuestionCircleOutlined />
346.      </Tooltip>
347.    }
348. >
349.   <Input.TextArea />
350. </FormItem><FormItem
351.   label="过滤条件"
352.   extra={
353.     <Tooltip title={customSystemParams}>
354.       系统参数配置 
355.        <QuestionCircleOutlined />
356.      </Tooltip>
357.    }
358. >
359.   <Input.TextArea />
360. </FormItem>callback();
361. <FormItem
362.   label="过滤条件"
363.   extra={
364.     <Tooltip title={customSystemParams}>
365.       系统参数配置 
366.        <QuestionCircleOutlined />
367.      </Tooltip>
368.    }
369. >
370.   <Input.TextArea />
371. </FormItem><FormItem
372.   label="过滤条件"
373.   extra={
374.     <Tooltip title={customSystemParams}>
375.       系统参数配置 
376.        <QuestionCircleOutlined />
377.      </Tooltip>
378.    }
379. >
380.   <Input.TextArea />
381. </FormItem><FormItem
382.   label="过滤条件"
383.   extra={
384.     <Tooltip title={customSystemParams}>
385.       系统参数配置 
386.        <QuestionCircleOutlined />
387.      </Tooltip>
388.    }
389. >
390.   <Input.TextArea />
391. </FormItem><FormItem
392.   label="过滤条件"
393.   extra={
394.     <Tooltip title={customSystemParams}>
395.       系统参数配置 
396.        <QuestionCircleOutlined />
397.      </Tooltip>
398.    }
399. >
400.   <Input.TextArea />
401. </FormItem>},
402. <FormItem
403.   label="过滤条件"
404.   extra={
405.     <Tooltip title={customSystemParams}>
406.       系统参数配置 
407.        <QuestionCircleOutlined />
408.      </Tooltip>
409.    }
410. >
411.   <Input.TextArea />
412. </FormItem><FormItem
413.   label="过滤条件"
414.   extra={
415.     <Tooltip title={customSystemParams}>
416.       系统参数配置 
417.        <QuestionCircleOutlined />
418.      </Tooltip>
419.    }
420. >
421.   <Input.TextArea />
422. </FormItem><FormItem
423.   label="过滤条件"
424.   extra={
425.     <Tooltip title={customSystemParams}>
426.       系统参数配置 
427.        <QuestionCircleOutlined />
428.      </Tooltip>
429.    }
430. >
431.   <Input.TextArea />
432. </FormItem>},
433. <FormItem
434.   label="过滤条件"
435.   extra={
436.     <Tooltip title={customSystemParams}>
437.       系统参数配置 
438.        <QuestionCircleOutlined />
439.      </Tooltip>
440.    }
441. >
442.   <Input.TextArea />
443. </FormItem><FormItem
444.   label="过滤条件"
445.   extra={
446.     <Tooltip title={customSystemParams}>
447.       系统参数配置 
448.        <QuestionCircleOutlined />
449.      </Tooltip>
450.    }
451. >
452.   <Input.TextArea />
453. </FormItem>],
454. <FormItem
455.   label="过滤条件"
456.   extra={
457.     <Tooltip title={customSystemParams}>
458.       系统参数配置 
459.        <QuestionCircleOutlined />
460.      </Tooltip>
461.    }
462. >
463.   <Input.TextArea />
464. </FormItem>})(<SpecificTime />)}
465. </FormItem>

复制代码

· antd4 的写法

1. <FormItem
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>label="具体时间"
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem>{...formItemLayout}
24. <FormItem
25.   label="过滤条件"
26.   extra={
27.     <Tooltip title={customSystemParams}>
28.       系统参数配置 
29.        <QuestionCircleOutlined />
30.      </Tooltip>
31.    }
32. >
33.   <Input.TextArea />
34. </FormItem>name="specificTime"
35. <FormItem
36.   label="过滤条件"
37.   extra={
38.     <Tooltip title={customSystemParams}>
39.       系统参数配置 
40.        <QuestionCircleOutlined />
41.      </Tooltip>
42.    }
43. >
44.   <Input.TextArea />
45. </FormItem>rules={[
46. <FormItem
47.   label="过滤条件"
48.   extra={
49.     <Tooltip title={customSystemParams}>
50.       系统参数配置 
51.        <QuestionCircleOutlined />
52.      </Tooltip>
53.    }
54. >
55.   <Input.TextArea />
56. </FormItem><FormItem
57.   label="过滤条件"
58.   extra={
59.     <Tooltip title={customSystemParams}>
60.       系统参数配置 
61.        <QuestionCircleOutlined />
62.      </Tooltip>
63.    }
64. >
65.   <Input.TextArea />
66. </FormItem>{
67. <FormItem
68.   label="过滤条件"
69.   extra={
70.     <Tooltip title={customSystemParams}>
71.       系统参数配置 
72.        <QuestionCircleOutlined />
73.      </Tooltip>
74.    }
75. >
76.   <Input.TextArea />
77. </FormItem><FormItem
78.   label="过滤条件"
79.   extra={
80.     <Tooltip title={customSystemParams}>
81.       系统参数配置 
82.        <QuestionCircleOutlined />
83.      </Tooltip>
84.    }
85. >
86.   <Input.TextArea />
87. </FormItem><FormItem
88.   label="过滤条件"
89.   extra={
90.     <Tooltip title={customSystemParams}>
91.       系统参数配置 
92.        <QuestionCircleOutlined />
93.      </Tooltip>
94.    }
95. >
96.   <Input.TextArea />
97. </FormItem>required: true,
98. <FormItem
99.   label="过滤条件"
100.   extra={
101.     <Tooltip title={customSystemParams}>
102.       系统参数配置 
103.        <QuestionCircleOutlined />
104.      </Tooltip>
105.    }
106. >
107.   <Input.TextArea />
108. </FormItem><FormItem
109.   label="过滤条件"
110.   extra={
111.     <Tooltip title={customSystemParams}>
112.       系统参数配置 
113.        <QuestionCircleOutlined />
114.      </Tooltip>
115.    }
116. >
117.   <Input.TextArea />
118. </FormItem><FormItem
119.   label="过滤条件"
120.   extra={
121.     <Tooltip title={customSystemParams}>
122.       系统参数配置 
123.        <QuestionCircleOutlined />
124.      </Tooltip>
125.    }
126. >
127.   <Input.TextArea />
128. </FormItem>validator: (_, value) => {
129. <FormItem
130.   label="过滤条件"
131.   extra={
132.     <Tooltip title={customSystemParams}>
133.       系统参数配置 
134.        <QuestionCircleOutlined />
135.      </Tooltip>
136.    }
137. >
138.   <Input.TextArea />
139. </FormItem><FormItem
140.   label="过滤条件"
141.   extra={
142.     <Tooltip title={customSystemParams}>
143.       系统参数配置 
144.        <QuestionCircleOutlined />
145.      </Tooltip>
146.    }
147. >
148.   <Input.TextArea />
149. </FormItem><FormItem
150.   label="过滤条件"
151.   extra={
152.     <Tooltip title={customSystemParams}>
153.       系统参数配置 
154.        <QuestionCircleOutlined />
155.      </Tooltip>
156.    }
157. >
158.   <Input.TextArea />
159. </FormItem><FormItem
160.   label="过滤条件"
161.   extra={
162.     <Tooltip title={customSystemParams}>
163.       系统参数配置 
164.        <QuestionCircleOutlined />
165.      </Tooltip>
166.    }
167. >
168.   <Input.TextArea />
169. </FormItem>if (!value || !value.hour || !value.min) {
170. <FormItem
171.   label="过滤条件"
172.   extra={
173.     <Tooltip title={customSystemParams}>
174.       系统参数配置 
175.        <QuestionCircleOutlined />
176.      </Tooltip>
177.    }
178. >
179.   <Input.TextArea />
180. </FormItem><FormItem
181.   label="过滤条件"
182.   extra={
183.     <Tooltip title={customSystemParams}>
184.       系统参数配置 
185.        <QuestionCircleOutlined />
186.      </Tooltip>
187.    }
188. >
189.   <Input.TextArea />
190. </FormItem><FormItem
191.   label="过滤条件"
192.   extra={
193.     <Tooltip title={customSystemParams}>
194.       系统参数配置 
195.        <QuestionCircleOutlined />
196.      </Tooltip>
197.    }
198. >
199.   <Input.TextArea />
200. </FormItem><FormItem
201.   label="过滤条件"
202.   extra={
203.     <Tooltip title={customSystemParams}>
204.       系统参数配置 
205.        <QuestionCircleOutlined />
206.      </Tooltip>
207.    }
208. >
209.   <Input.TextArea />
210. </FormItem><FormItem
211.   label="过滤条件"
212.   extra={
213.     <Tooltip title={customSystemParams}>
214.       系统参数配置 
215.        <QuestionCircleOutlined />
216.      </Tooltip>
217.    }
218. >
219.   <Input.TextArea />
220. </FormItem><FormItem
221.   label="过滤条件"
222.   extra={
223.     <Tooltip title={customSystemParams}>
224.       系统参数配置 
225.        <QuestionCircleOutlined />
226.      </Tooltip>
227.    }
228. >
229.   <Input.TextArea />
230. </FormItem>return Promise.reject('具体时间不可为空');
231. <FormItem
232.   label="过滤条件"
233.   extra={
234.     <Tooltip title={customSystemParams}>
235.       系统参数配置 
236.        <QuestionCircleOutlined />
237.      </Tooltip>
238.    }
239. >
240.   <Input.TextArea />
241. </FormItem><FormItem
242.   label="过滤条件"
243.   extra={
244.     <Tooltip title={customSystemParams}>
245.       系统参数配置 
246.        <QuestionCircleOutlined />
247.      </Tooltip>
248.    }
249. >
250.   <Input.TextArea />
251. </FormItem><FormItem
252.   label="过滤条件"
253.   extra={
254.     <Tooltip title={customSystemParams}>
255.       系统参数配置 
256.        <QuestionCircleOutlined />
257.      </Tooltip>
258.    }
259. >
260.   <Input.TextArea />
261. </FormItem><FormItem
262.   label="过滤条件"
263.   extra={
264.     <Tooltip title={customSystemParams}>
265.       系统参数配置 
266.        <QuestionCircleOutlined />
267.      </Tooltip>
268.    }
269. >
270.   <Input.TextArea />
271. </FormItem>}
272. <FormItem
273.   label="过滤条件"
274.   extra={
275.     <Tooltip title={customSystemParams}>
276.       系统参数配置 
277.        <QuestionCircleOutlined />
278.      </Tooltip>
279.    }
280. >
281.   <Input.TextArea />
282. </FormItem><FormItem
283.   label="过滤条件"
284.   extra={
285.     <Tooltip title={customSystemParams}>
286.       系统参数配置 
287.        <QuestionCircleOutlined />
288.      </Tooltip>
289.    }
290. >
291.   <Input.TextArea />
292. </FormItem><FormItem
293.   label="过滤条件"
294.   extra={
295.     <Tooltip title={customSystemParams}>
296.       系统参数配置 
297.        <QuestionCircleOutlined />
298.      </Tooltip>
299.    }
300. >
301.   <Input.TextArea />
302. </FormItem><FormItem
303.   label="过滤条件"
304.   extra={
305.     <Tooltip title={customSystemParams}>
306.       系统参数配置 
307.        <QuestionCircleOutlined />
308.      </Tooltip>
309.    }
310. >
311.   <Input.TextArea />
312. </FormItem>return Promise.resolve();
313. <FormItem
314.   label="过滤条件"
315.   extra={
316.     <Tooltip title={customSystemParams}>
317.       系统参数配置 
318.        <QuestionCircleOutlined />
319.      </Tooltip>
320.    }
321. >
322.   <Input.TextArea />
323. </FormItem><FormItem
324.   label="过滤条件"
325.   extra={
326.     <Tooltip title={customSystemParams}>
327.       系统参数配置 
328.        <QuestionCircleOutlined />
329.      </Tooltip>
330.    }
331. >
332.   <Input.TextArea />
333. </FormItem><FormItem
334.   label="过滤条件"
335.   extra={
336.     <Tooltip title={customSystemParams}>
337.       系统参数配置 
338.        <QuestionCircleOutlined />
339.      </Tooltip>
340.    }
341. >
342.   <Input.TextArea />
343. </FormItem>},
344. <FormItem
345.   label="过滤条件"
346.   extra={
347.     <Tooltip title={customSystemParams}>
348.       系统参数配置 
349.        <QuestionCircleOutlined />
350.      </Tooltip>
351.    }
352. >
353.   <Input.TextArea />
354. </FormItem><FormItem
355.   label="过滤条件"
356.   extra={
357.     <Tooltip title={customSystemParams}>
358.       系统参数配置 
359.        <QuestionCircleOutlined />
360.      </Tooltip>
361.    }
362. >
363.   <Input.TextArea />
364. </FormItem>},
365. <FormItem
366.   label="过滤条件"
367.   extra={
368.     <Tooltip title={customSystemParams}>
369.       系统参数配置 
370.        <QuestionCircleOutlined />
371.      </Tooltip>
372.    }
373. >
374.   <Input.TextArea />
375. </FormItem>]}
376. >
377. <FormItem
378.   label="过滤条件"
379.   extra={
380.     <Tooltip title={customSystemParams}>
381.       系统参数配置 
382.        <QuestionCircleOutlined />
383.      </Tooltip>
384.    }
385. >
386.   <Input.TextArea />
387. </FormItem><SpecificTime />)
388. </FormItem>

复制代码

● validateFields
不再支持 callback，该方法会直接返回一个 Promise，可以通过 then / catch 处理。

1. this.formRef.validateFields()
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>.then((values) => {
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem>onOk({ ...values, id: appInfo.id || '' });
34. })
35. <FormItem
36.   label="过滤条件"
37.   extra={
38.     <Tooltip title={customSystemParams}>
39.       系统参数配置 
40.        <QuestionCircleOutlined />
41.      </Tooltip>
42.    }
43. >
44.   <Input.TextArea />
45. </FormItem>.catch(({ errorFields }) {
46. <FormItem
47.   label="过滤条件"
48.   extra={
49.     <Tooltip title={customSystemParams}>
50.       系统参数配置 
51.        <QuestionCircleOutlined />
52.      </Tooltip>
53.    }
54. >
55.   <Input.TextArea />
56. </FormItem><FormItem
57.   label="过滤条件"
58.   extra={
59.     <Tooltip title={customSystemParams}>
60.       系统参数配置 
61.        <QuestionCircleOutlined />
62.      </Tooltip>
63.    }
64. >
65.   <Input.TextArea />
66. </FormItem>this.formRef.scrollToField(errorFields[0].name);
67. <FormItem
68.   label="过滤条件"
69.   extra={
70.     <Tooltip title={customSystemParams}>
71.       系统参数配置 
72.        <QuestionCircleOutlined />
73.      </Tooltip>
74.    }
75. >
76.   <Input.TextArea />
77. </FormItem>})

复制代码

或者使用 async/await。

1. try {
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>const values = await validateFields();
13. } catch ({ errorFields }) {
14. <FormItem
15.   label="过滤条件"
16.   extra={
17.     <Tooltip title={customSystemParams}>
18.       系统参数配置 
19.        <QuestionCircleOutlined />
20.      </Tooltip>
21.    }
22. >
23.   <Input.TextArea />
24. </FormItem>scrollToField(errorFields[0].name);
25. }

复制代码

● validateFieldsAndScroll
该 api 被拆分了，将其拆分为更为独立的 scrollToField 方法。

1. onFinishFailed = ({ errorFields }) => {
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>form.scrollToField(errorFields[0].name);
13. };

复制代码

● form.name
在 antd 3.x 版本，绑定字段时，可以采用 . 分割的方式。如：

1. getFieldDecorator('sideTableParam.primaryKey')
2. getFieldDecorator('sideTableParam.primaryValue')
3. getFieldDecorator('sideTableParam.primaryName')

复制代码

在最终获取 values 时，antd 3.x 的版本会对字段进行汇总，得到如下：

1. const values = {
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>sideTableParam: {
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem>primaryKey: xxx,
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem>primaryValue: xxx,
55. <FormItem
56.   label="过滤条件"
57.   extra={
58.     <Tooltip title={customSystemParams}>
59.       系统参数配置 
60.        <QuestionCircleOutlined />
61.      </Tooltip>
62.    }
63. >
64.   <Input.TextArea />
65. </FormItem><FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem>primaryName: xxx,
76. <FormItem
77.   label="过滤条件"
78.   extra={
79.     <Tooltip title={customSystemParams}>
80.       系统参数配置 
81.        <QuestionCircleOutlined />
82.      </Tooltip>
83.    }
84. >
85.   <Input.TextArea />
86. </FormItem>}
87. }

复制代码

而在 antd 4.x下，会得到如下的 values 结果：

1. const values = {
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>'sideTableParam.primaryKey': xxx,
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem>'sideTableParam.primaryValue': xxx,
24. <FormItem
25.   label="过滤条件"
26.   extra={
27.     <Tooltip title={customSystemParams}>
28.       系统参数配置 
29.        <QuestionCircleOutlined />
30.      </Tooltip>
31.    }
32. >
33.   <Input.TextArea />
34. </FormItem>'sideTableParam.primaryName': xxx,
35. }

复制代码

· 解决方法
在 antd 4.x 版本传入数组。

1. name={['sideTableParam', 'primaryKey']}
2. name={['sideTableParam', 'primaryValue']}
3. name={['sideTableParam', 'primaryName']}

复制代码

使用 setFieldsValue 设置值：

1. setFieldsValue({
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>sideTableParam: [
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem>{
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem>primaryKey: 'xxx',
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem><FormItem
86.   label="过滤条件"
87.   extra={
88.     <Tooltip title={customSystemParams}>
89.       系统参数配置 
90.        <QuestionCircleOutlined />
91.      </Tooltip>
92.    }
93. >
94.   <Input.TextArea />
95. </FormItem>primaryValue: 'xxx',
96. <FormItem
97.   label="过滤条件"
98.   extra={
99.     <Tooltip title={customSystemParams}>
100.       系统参数配置 
101.        <QuestionCircleOutlined />
102.      </Tooltip>
103.    }
104. >
105.   <Input.TextArea />
106. </FormItem><FormItem
107.   label="过滤条件"
108.   extra={
109.     <Tooltip title={customSystemParams}>
110.       系统参数配置 
111.        <QuestionCircleOutlined />
112.      </Tooltip>
113.    }
114. >
115.   <Input.TextArea />
116. </FormItem><FormItem
117.   label="过滤条件"
118.   extra={
119.     <Tooltip title={customSystemParams}>
120.       系统参数配置 
121.        <QuestionCircleOutlined />
122.      </Tooltip>
123.    }
124. >
125.   <Input.TextArea />
126. </FormItem>primaryName: 'xxx',
127. <FormItem
128.   label="过滤条件"
129.   extra={
130.     <Tooltip title={customSystemParams}>
131.       系统参数配置 
132.        <QuestionCircleOutlined />
133.      </Tooltip>
134.    }
135. >
136.   <Input.TextArea />
137. </FormItem><FormItem
138.   label="过滤条件"
139.   extra={
140.     <Tooltip title={customSystemParams}>
141.       系统参数配置 
142.        <QuestionCircleOutlined />
143.      </Tooltip>
144.    }
145. >
146.   <Input.TextArea />
147. </FormItem>},
148. <FormItem
149.   label="过滤条件"
150.   extra={
151.     <Tooltip title={customSystemParams}>
152.       系统参数配置 
153.        <QuestionCircleOutlined />
154.      </Tooltip>
155.    }
156. >
157.   <Input.TextArea />
158. </FormItem>],
159. });

复制代码

当我们使用 name={['sideTableParam', 'primaryKey']} 方式绑定值的时候，与其关联的 dependencies/getFieldValue 都需要设置为['sideTableParam', 'primaryKey']，例如：

1. <FormItem dependencies={[['alert', 'sendTypeList']]} noStyle>
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem>{({ getFieldValue }) => {
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem>const isShowWebHook = getFieldValue(['alert', 'sendTypeList'])?.includes(
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem>ALARM_TYPE.DING
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem>);
86. <FormItem
87.   label="过滤条件"
88.   extra={
89.     <Tooltip title={customSystemParams}>
90.       系统参数配置 
91.        <QuestionCircleOutlined />
92.      </Tooltip>
93.    }
94. >
95.   <Input.TextArea />
96. </FormItem> return (
97. <FormItem
98.   label="过滤条件"
99.   extra={
100.     <Tooltip title={customSystemParams}>
101.       系统参数配置 
102.        <QuestionCircleOutlined />
103.      </Tooltip>
104.    }
105. >
106.   <Input.TextArea />
107. </FormItem><FormItem
108.   label="过滤条件"
109.   extra={
110.     <Tooltip title={customSystemParams}>
111.       系统参数配置 
112.        <QuestionCircleOutlined />
113.      </Tooltip>
114.    }
115. >
116.   <Input.TextArea />
117. </FormItem> isShowWebHook &&
118. <FormItem
119.   label="过滤条件"
120.   extra={
121.     <Tooltip title={customSystemParams}>
122.       系统参数配置 
123.        <QuestionCircleOutlined />
124.      </Tooltip>
125.    }
126. >
127.   <Input.TextArea />
128. </FormItem><FormItem
129.   label="过滤条件"
130.   extra={
131.     <Tooltip title={customSystemParams}>
132.       系统参数配置 
133.        <QuestionCircleOutlined />
134.      </Tooltip>
135.    }
136. >
137.   <Input.TextArea />
138. </FormItem><FormItem
139.   label="过滤条件"
140.   extra={
141.     <Tooltip title={customSystemParams}>
142.       系统参数配置 
143.        <QuestionCircleOutlined />
144.      </Tooltip>
145.    }
146. >
147.   <Input.TextArea />
148. </FormItem> RenderFormItem({
149. <FormItem
150.   label="过滤条件"
151.   extra={
152.     <Tooltip title={customSystemParams}>
153.       系统参数配置 
154.        <QuestionCircleOutlined />
155.      </Tooltip>
156.    }
157. >
158.   <Input.TextArea />
159. </FormItem><FormItem
160.   label="过滤条件"
161.   extra={
162.     <Tooltip title={customSystemParams}>
163.       系统参数配置 
164.        <QuestionCircleOutlined />
165.      </Tooltip>
166.    }
167. >
168.   <Input.TextArea />
169. </FormItem><FormItem
170.   label="过滤条件"
171.   extra={
172.     <Tooltip title={customSystemParams}>
173.       系统参数配置 
174.        <QuestionCircleOutlined />
175.      </Tooltip>
176.    }
177. >
178.   <Input.TextArea />
179. </FormItem><FormItem
180.   label="过滤条件"
181.   extra={
182.     <Tooltip title={customSystemParams}>
183.       系统参数配置 
184.        <QuestionCircleOutlined />
185.      </Tooltip>
186.    }
187. >
188.   <Input.TextArea />
189. </FormItem> item: {
190. <FormItem
191.   label="过滤条件"
192.   extra={
193.     <Tooltip title={customSystemParams}>
194.       系统参数配置 
195.        <QuestionCircleOutlined />
196.      </Tooltip>
197.    }
198. >
199.   <Input.TextArea />
200. </FormItem><FormItem
201.   label="过滤条件"
202.   extra={
203.     <Tooltip title={customSystemParams}>
204.       系统参数配置 
205.        <QuestionCircleOutlined />
206.      </Tooltip>
207.    }
208. >
209.   <Input.TextArea />
210. </FormItem><FormItem
211.   label="过滤条件"
212.   extra={
213.     <Tooltip title={customSystemParams}>
214.       系统参数配置 
215.        <QuestionCircleOutlined />
216.      </Tooltip>
217.    }
218. >
219.   <Input.TextArea />
220. </FormItem><FormItem
221.   label="过滤条件"
222.   extra={
223.     <Tooltip title={customSystemParams}>
224.       系统参数配置 
225.        <QuestionCircleOutlined />
226.      </Tooltip>
227.    }
228. >
229.   <Input.TextArea />
230. </FormItem><FormItem
231.   label="过滤条件"
232.   extra={
233.     <Tooltip title={customSystemParams}>
234.       系统参数配置 
235.        <QuestionCircleOutlined />
236.      </Tooltip>
237.    }
238. >
239.   <Input.TextArea />
240. </FormItem> label: 'WebHook',
241. <FormItem
242.   label="过滤条件"
243.   extra={
244.     <Tooltip title={customSystemParams}>
245.       系统参数配置 
246.        <QuestionCircleOutlined />
247.      </Tooltip>
248.    }
249. >
250.   <Input.TextArea />
251. </FormItem><FormItem
252.   label="过滤条件"
253.   extra={
254.     <Tooltip title={customSystemParams}>
255.       系统参数配置 
256.        <QuestionCircleOutlined />
257.      </Tooltip>
258.    }
259. >
260.   <Input.TextArea />
261. </FormItem><FormItem
262.   label="过滤条件"
263.   extra={
264.     <Tooltip title={customSystemParams}>
265.       系统参数配置 
266.        <QuestionCircleOutlined />
267.      </Tooltip>
268.    }
269. >
270.   <Input.TextArea />
271. </FormItem><FormItem
272.   label="过滤条件"
273.   extra={
274.     <Tooltip title={customSystemParams}>
275.       系统参数配置 
276.        <QuestionCircleOutlined />
277.      </Tooltip>
278.    }
279. >
280.   <Input.TextArea />
281. </FormItem><FormItem
282.   label="过滤条件"
283.   extra={
284.     <Tooltip title={customSystemParams}>
285.       系统参数配置 
286.        <QuestionCircleOutlined />
287.      </Tooltip>
288.    }
289. >
290.   <Input.TextArea />
291. </FormItem> key: ['alert', 'dingWebhook'],
292. <FormItem
293.   label="过滤条件"
294.   extra={
295.     <Tooltip title={customSystemParams}>
296.       系统参数配置 
297.        <QuestionCircleOutlined />
298.      </Tooltip>
299.    }
300. >
301.   <Input.TextArea />
302. </FormItem><FormItem
303.   label="过滤条件"
304.   extra={
305.     <Tooltip title={customSystemParams}>
306.       系统参数配置 
307.        <QuestionCircleOutlined />
308.      </Tooltip>
309.    }
310. >
311.   <Input.TextArea />
312. </FormItem><FormItem
313.   label="过滤条件"
314.   extra={
315.     <Tooltip title={customSystemParams}>
316.       系统参数配置 
317.        <QuestionCircleOutlined />
318.      </Tooltip>
319.    }
320. >
321.   <Input.TextArea />
322. </FormItem><FormItem
323.   label="过滤条件"
324.   extra={
325.     <Tooltip title={customSystemParams}>
326.       系统参数配置 
327.        <QuestionCircleOutlined />
328.      </Tooltip>
329.    }
330. >
331.   <Input.TextArea />
332. </FormItem><FormItem
333.   label="过滤条件"
334.   extra={
335.     <Tooltip title={customSystemParams}>
336.       系统参数配置 
337.        <QuestionCircleOutlined />
338.      </Tooltip>
339.    }
340. >
341.   <Input.TextArea />
342. </FormItem> component: <Input placeholder="请输入WebHook地址" />,
343. <FormItem
344.   label="过滤条件"
345.   extra={
346.     <Tooltip title={customSystemParams}>
347.       系统参数配置 
348.        <QuestionCircleOutlined />
349.      </Tooltip>
350.    }
351. >
352.   <Input.TextArea />
353. </FormItem><FormItem
354.   label="过滤条件"
355.   extra={
356.     <Tooltip title={customSystemParams}>
357.       系统参数配置 
358.        <QuestionCircleOutlined />
359.      </Tooltip>
360.    }
361. >
362.   <Input.TextArea />
363. </FormItem><FormItem
364.   label="过滤条件"
365.   extra={
366.     <Tooltip title={customSystemParams}>
367.       系统参数配置 
368.        <QuestionCircleOutlined />
369.      </Tooltip>
370.    }
371. >
372.   <Input.TextArea />
373. </FormItem><FormItem
374.   label="过滤条件"
375.   extra={
376.     <Tooltip title={customSystemParams}>
377.       系统参数配置 
378.        <QuestionCircleOutlined />
379.      </Tooltip>
380.    }
381. >
382.   <Input.TextArea />
383. </FormItem><FormItem
384.   label="过滤条件"
385.   extra={
386.     <Tooltip title={customSystemParams}>
387.       系统参数配置 
388.        <QuestionCircleOutlined />
389.      </Tooltip>
390.    }
391. >
392.   <Input.TextArea />
393. </FormItem> rules: [
394. <FormItem
395.   label="过滤条件"
396.   extra={
397.     <Tooltip title={customSystemParams}>
398.       系统参数配置 
399.        <QuestionCircleOutlined />
400.      </Tooltip>
401.    }
402. >
403.   <Input.TextArea />
404. </FormItem><FormItem
405.   label="过滤条件"
406.   extra={
407.     <Tooltip title={customSystemParams}>
408.       系统参数配置 
409.        <QuestionCircleOutlined />
410.      </Tooltip>
411.    }
412. >
413.   <Input.TextArea />
414. </FormItem><FormItem
415.   label="过滤条件"
416.   extra={
417.     <Tooltip title={customSystemParams}>
418.       系统参数配置 
419.        <QuestionCircleOutlined />
420.      </Tooltip>
421.    }
422. >
423.   <Input.TextArea />
424. </FormItem><FormItem
425.   label="过滤条件"
426.   extra={
427.     <Tooltip title={customSystemParams}>
428.       系统参数配置 
429.        <QuestionCircleOutlined />
430.      </Tooltip>
431.    }
432. >
433.   <Input.TextArea />
434. </FormItem><FormItem
435.   label="过滤条件"
436.   extra={
437.     <Tooltip title={customSystemParams}>
438.       系统参数配置 
439.        <QuestionCircleOutlined />
440.      </Tooltip>
441.    }
442. >
443.   <Input.TextArea />
444. </FormItem><FormItem
445.   label="过滤条件"
446.   extra={
447.     <Tooltip title={customSystemParams}>
448.       系统参数配置 
449.        <QuestionCircleOutlined />
450.      </Tooltip>
451.    }
452. >
453.   <Input.TextArea />
454. </FormItem> {
455. <FormItem
456.   label="过滤条件"
457.   extra={
458.     <Tooltip title={customSystemParams}>
459.       系统参数配置 
460.        <QuestionCircleOutlined />
461.      </Tooltip>
462.    }
463. >
464.   <Input.TextArea />
465. </FormItem><FormItem
466.   label="过滤条件"
467.   extra={
468.     <Tooltip title={customSystemParams}>
469.       系统参数配置 
470.        <QuestionCircleOutlined />
471.      </Tooltip>
472.    }
473. >
474.   <Input.TextArea />
475. </FormItem><FormItem
476.   label="过滤条件"
477.   extra={
478.     <Tooltip title={customSystemParams}>
479.       系统参数配置 
480.        <QuestionCircleOutlined />
481.      </Tooltip>
482.    }
483. >
484.   <Input.TextArea />
485. </FormItem><FormItem
486.   label="过滤条件"
487.   extra={
488.     <Tooltip title={customSystemParams}>
489.       系统参数配置 
490.        <QuestionCircleOutlined />
491.      </Tooltip>
492.    }
493. >
494.   <Input.TextArea />
495. </FormItem><FormItem
496.   label="过滤条件"
497.   extra={
498.     <Tooltip title={customSystemParams}>
499.       系统参数配置 
500.        <QuestionCircleOutlined />
501.      </Tooltip>
502.    }
503. >
504.   <Input.TextArea />
505. </FormItem><FormItem
506.   label="过滤条件"
507.   extra={
508.     <Tooltip title={customSystemParams}>
509.       系统参数配置 
510.        <QuestionCircleOutlined />
511.      </Tooltip>
512.    }
513. >
514.   <Input.TextArea />
515. </FormItem><FormItem
516.   label="过滤条件"
517.   extra={
518.     <Tooltip title={customSystemParams}>
519.       系统参数配置 
520.        <QuestionCircleOutlined />
521.      </Tooltip>
522.    }
523. >
524.   <Input.TextArea />
525. </FormItem> required: true,
526. <FormItem
527.   label="过滤条件"
528.   extra={
529.     <Tooltip title={customSystemParams}>
530.       系统参数配置 
531.        <QuestionCircleOutlined />
532.      </Tooltip>
533.    }
534. >
535.   <Input.TextArea />
536. </FormItem><FormItem
537.   label="过滤条件"
538.   extra={
539.     <Tooltip title={customSystemParams}>
540.       系统参数配置 
541.        <QuestionCircleOutlined />
542.      </Tooltip>
543.    }
544. >
545.   <Input.TextArea />
546. </FormItem><FormItem
547.   label="过滤条件"
548.   extra={
549.     <Tooltip title={customSystemParams}>
550.       系统参数配置 
551.        <QuestionCircleOutlined />
552.      </Tooltip>
553.    }
554. >
555.   <Input.TextArea />
556. </FormItem><FormItem
557.   label="过滤条件"
558.   extra={
559.     <Tooltip title={customSystemParams}>
560.       系统参数配置 
561.        <QuestionCircleOutlined />
562.      </Tooltip>
563.    }
564. >
565.   <Input.TextArea />
566. </FormItem><FormItem
567.   label="过滤条件"
568.   extra={
569.     <Tooltip title={customSystemParams}>
570.       系统参数配置 
571.        <QuestionCircleOutlined />
572.      </Tooltip>
573.    }
574. >
575.   <Input.TextArea />
576. </FormItem><FormItem
577.   label="过滤条件"
578.   extra={
579.     <Tooltip title={customSystemParams}>
580.       系统参数配置 
581.        <QuestionCircleOutlined />
582.      </Tooltip>
583.    }
584. >
585.   <Input.TextArea />
586. </FormItem><FormItem
587.   label="过滤条件"
588.   extra={
589.     <Tooltip title={customSystemParams}>
590.       系统参数配置 
591.        <QuestionCircleOutlined />
592.      </Tooltip>
593.    }
594. >
595.   <Input.TextArea />
596. </FormItem> message: 'WebHook地址为必填项',
597. <FormItem
598.   label="过滤条件"
599.   extra={
600.     <Tooltip title={customSystemParams}>
601.       系统参数配置 
602.        <QuestionCircleOutlined />
603.      </Tooltip>
604.    }
605. >
606.   <Input.TextArea />
607. </FormItem><FormItem
608.   label="过滤条件"
609.   extra={
610.     <Tooltip title={customSystemParams}>
611.       系统参数配置 
612.        <QuestionCircleOutlined />
613.      </Tooltip>
614.    }
615. >
616.   <Input.TextArea />
617. </FormItem><FormItem
618.   label="过滤条件"
619.   extra={
620.     <Tooltip title={customSystemParams}>
621.       系统参数配置 
622.        <QuestionCircleOutlined />
623.      </Tooltip>
624.    }
625. >
626.   <Input.TextArea />
627. </FormItem><FormItem
628.   label="过滤条件"
629.   extra={
630.     <Tooltip title={customSystemParams}>
631.       系统参数配置 
632.        <QuestionCircleOutlined />
633.      </Tooltip>
634.    }
635. >
636.   <Input.TextArea />
637. </FormItem><FormItem
638.   label="过滤条件"
639.   extra={
640.     <Tooltip title={customSystemParams}>
641.       系统参数配置 
642.        <QuestionCircleOutlined />
643.      </Tooltip>
644.    }
645. >
646.   <Input.TextArea />
647. </FormItem><FormItem
648.   label="过滤条件"
649.   extra={
650.     <Tooltip title={customSystemParams}>
651.       系统参数配置 
652.        <QuestionCircleOutlined />
653.      </Tooltip>
654.    }
655. >
656.   <Input.TextArea />
657. </FormItem> },
658. <FormItem
659.   label="过滤条件"
660.   extra={
661.     <Tooltip title={customSystemParams}>
662.       系统参数配置 
663.        <QuestionCircleOutlined />
664.      </Tooltip>
665.    }
666. >
667.   <Input.TextArea />
668. </FormItem><FormItem
669.   label="过滤条件"
670.   extra={
671.     <Tooltip title={customSystemParams}>
672.       系统参数配置 
673.        <QuestionCircleOutlined />
674.      </Tooltip>
675.    }
676. >
677.   <Input.TextArea />
678. </FormItem><FormItem
679.   label="过滤条件"
680.   extra={
681.     <Tooltip title={customSystemParams}>
682.       系统参数配置 
683.        <QuestionCircleOutlined />
684.      </Tooltip>
685.    }
686. >
687.   <Input.TextArea />
688. </FormItem><FormItem
689.   label="过滤条件"
690.   extra={
691.     <Tooltip title={customSystemParams}>
692.       系统参数配置 
693.        <QuestionCircleOutlined />
694.      </Tooltip>
695.    }
696. >
697.   <Input.TextArea />
698. </FormItem><FormItem
699.   label="过滤条件"
700.   extra={
701.     <Tooltip title={customSystemParams}>
702.       系统参数配置 
703.        <QuestionCircleOutlined />
704.      </Tooltip>
705.    }
706. >
707.   <Input.TextArea />
708. </FormItem> ],
709. <FormItem
710.   label="过滤条件"
711.   extra={
712.     <Tooltip title={customSystemParams}>
713.       系统参数配置 
714.        <QuestionCircleOutlined />
715.      </Tooltip>
716.    }
717. >
718.   <Input.TextArea />
719. </FormItem><FormItem
720.   label="过滤条件"
721.   extra={
722.     <Tooltip title={customSystemParams}>
723.       系统参数配置 
724.        <QuestionCircleOutlined />
725.      </Tooltip>
726.    }
727. >
728.   <Input.TextArea />
729. </FormItem><FormItem
730.   label="过滤条件"
731.   extra={
732.     <Tooltip title={customSystemParams}>
733.       系统参数配置 
734.        <QuestionCircleOutlined />
735.      </Tooltip>
736.    }
737. >
738.   <Input.TextArea />
739. </FormItem><FormItem
740.   label="过滤条件"
741.   extra={
742.     <Tooltip title={customSystemParams}>
743.       系统参数配置 
744.        <QuestionCircleOutlined />
745.      </Tooltip>
746.    }
747. >
748.   <Input.TextArea />
749. </FormItem><FormItem
750.   label="过滤条件"
751.   extra={
752.     <Tooltip title={customSystemParams}>
753.       系统参数配置 
754.        <QuestionCircleOutlined />
755.      </Tooltip>
756.    }
757. >
758.   <Input.TextArea />
759. </FormItem> initialValue: taskInfo?.alert?.dingWebhook || '',
760. <FormItem
761.   label="过滤条件"
762.   extra={
763.     <Tooltip title={customSystemParams}>
764.       系统参数配置 
765.        <QuestionCircleOutlined />
766.      </Tooltip>
767.    }
768. >
769.   <Input.TextArea />
770. </FormItem><FormItem
771.   label="过滤条件"
772.   extra={
773.     <Tooltip title={customSystemParams}>
774.       系统参数配置 
775.        <QuestionCircleOutlined />
776.      </Tooltip>
777.    }
778. >
779.   <Input.TextArea />
780. </FormItem><FormItem
781.   label="过滤条件"
782.   extra={
783.     <Tooltip title={customSystemParams}>
784.       系统参数配置 
785.        <QuestionCircleOutlined />
786.      </Tooltip>
787.    }
788. >
789.   <Input.TextArea />
790. </FormItem><FormItem
791.   label="过滤条件"
792.   extra={
793.     <Tooltip title={customSystemParams}>
794.       系统参数配置 
795.        <QuestionCircleOutlined />
796.      </Tooltip>
797.    }
798. >
799.   <Input.TextArea />
800. </FormItem> },
801. <FormItem
802.   label="过滤条件"
803.   extra={
804.     <Tooltip title={customSystemParams}>
805.       系统参数配置 
806.        <QuestionCircleOutlined />
807.      </Tooltip>
808.    }
809. >
810.   <Input.TextArea />
811. </FormItem><FormItem
812.   label="过滤条件"
813.   extra={
814.     <Tooltip title={customSystemParams}>
815.       系统参数配置 
816.        <QuestionCircleOutlined />
817.      </Tooltip>
818.    }
819. >
820.   <Input.TextArea />
821. </FormItem><FormItem
822.   label="过滤条件"
823.   extra={
824.     <Tooltip title={customSystemParams}>
825.       系统参数配置 
826.        <QuestionCircleOutlined />
827.      </Tooltip>
828.    }
829. >
830.   <Input.TextArea />
831. </FormItem> })
832. <FormItem
833.   label="过滤条件"
834.   extra={
835.     <Tooltip title={customSystemParams}>
836.       系统参数配置 
837.        <QuestionCircleOutlined />
838.      </Tooltip>
839.    }
840. >
841.   <Input.TextArea />
842. </FormItem><FormItem
843.   label="过滤条件"
844.   extra={
845.     <Tooltip title={customSystemParams}>
846.       系统参数配置 
847.        <QuestionCircleOutlined />
848.      </Tooltip>
849.    }
850. >
851.   <Input.TextArea />
852. </FormItem> );
853. <FormItem
854.   label="过滤条件"
855.   extra={
856.     <Tooltip title={customSystemParams}>
857.       系统参数配置 
858.        <QuestionCircleOutlined />
859.      </Tooltip>
860.    }
861. >
862.   <Input.TextArea />
863. </FormItem>}}
864. </FormItem>

复制代码

当我们希望通过 validateFields 拿到的数据是数组时，例如这样：

我们可以设置为这样：

1. const formItems = keys.map((k: React.Key) => (
2. <FormItem
3.   label="过滤条件"
4.   extra={
5.     <Tooltip title={customSystemParams}>
6.       系统参数配置 
7.        <QuestionCircleOutlined />
8.      </Tooltip>
9.    }
10. >
11.   <Input.TextArea />
12. </FormItem><Form.Item key={k} required label="名称">
13. <FormItem
14.   label="过滤条件"
15.   extra={
16.     <Tooltip title={customSystemParams}>
17.       系统参数配置 
18.        <QuestionCircleOutlined />
19.      </Tooltip>
20.    }
21. >
22.   <Input.TextArea />
23. </FormItem><FormItem
24.   label="过滤条件"
25.   extra={
26.     <Tooltip title={customSystemParams}>
27.       系统参数配置 
28.        <QuestionCircleOutlined />
29.      </Tooltip>
30.    }
31. >
32.   <Input.TextArea />
33. </FormItem><Form.Item
34. <FormItem
35.   label="过滤条件"
36.   extra={
37.     <Tooltip title={customSystemParams}>
38.       系统参数配置 
39.        <QuestionCircleOutlined />
40.      </Tooltip>
41.    }
42. >
43.   <Input.TextArea />
44. </FormItem><FormItem
45.   label="过滤条件"
46.   extra={
47.     <Tooltip title={customSystemParams}>
48.       系统参数配置 
49.        <QuestionCircleOutlined />
50.      </Tooltip>
51.    }
52. >
53.   <Input.TextArea />
54. </FormItem><FormItem
55.   label="过滤条件"
56.   extra={
57.     <Tooltip title={customSystemParams}>
58.       系统参数配置 
59.        <QuestionCircleOutlined />
60.      </Tooltip>
61.    }
62. >
63.   <Input.TextArea />
64. </FormItem>noStyle
65. <FormItem
66.   label="过滤条件"
67.   extra={
68.     <Tooltip title={customSystemParams}>
69.       系统参数配置 
70.        <QuestionCircleOutlined />
71.      </Tooltip>
72.    }
73. >
74.   <Input.TextArea />
75. </FormItem><FormItem
76.   label="过滤条件"
77.   extra={
78.     <Tooltip title={customSystemParams}>
79.       系统参数配置 
80.        <QuestionCircleOutlined />
81.      </Tooltip>
82.    }
83. >
84.   <Input.TextArea />
85. </FormItem><FormItem
86.   label="过滤条件"
87.   extra={
88.     <Tooltip title={customSystemParams}>
89.       系统参数配置 
90.        <QuestionCircleOutlined />
91.      </Tooltip>
92.    }
93. >
94.   <Input.TextArea />
95. </FormItem>name={['names', k]}
96. <FormItem
97.   label="过滤条件"
98.   extra={
99.     <Tooltip title={customSystemParams}>
100.       系统参数配置 
101.        <QuestionCircleOutlined />
102.      </Tooltip>
103.    }
104. >
105.   <Input.TextArea />
106. </FormItem><FormItem
107.   label="过滤条件"
108.   extra={
109.     <Tooltip title={customSystemParams}>
110.       系统参数配置 
111.        <QuestionCircleOutlined />
112.      </Tooltip>
113.    }
114. >
115.   <Input.TextArea />
116. </FormItem><FormItem
117.   label="过滤条件"
118.   extra={
119.     <Tooltip title={customSystemParams}>
120.       系统参数配置 
121.        <QuestionCircleOutlined />
122.      </Tooltip>
123.    }
124. >
125.   <Input.TextArea />
126. </FormItem>rules={[
127. <FormItem
128.   label="过滤条件"
129.   extra={
130.     <Tooltip title={customSystemParams}>
131.       系统参数配置 
132.        <QuestionCircleOutlined />
133.      </Tooltip>
134.    }
135. >
136.   <Input.TextArea />
137. </FormItem><FormItem
138.   label="过滤条件"
139.   extra={
140.     <Tooltip title={customSystemParams}>
141.       系统参数配置 
142.        <QuestionCircleOutlined />
143.      </Tooltip>
144.    }
145. >
146.   <Input.TextArea />
147. </FormItem><FormItem
148.   label="过滤条件"
149.   extra={
150.     <Tooltip title={customSystemParams}>
151.       系统参数配置 
152.        <QuestionCircleOutlined />
153.      </Tooltip>
154.    }
155. >
156.   <Input.TextArea />
157. </FormItem><FormItem
158.   label="过滤条件"
159.   extra={
160.     <Tooltip title={customSystemParams}>
161.       系统参数配置 
162.        <QuestionCircleOutlined />
163.      </Tooltip>
164.    }
165. >
166.   <Input.TextArea />
167. </FormItem>{ required: true, message: '请输入标签名称' },
168. <FormItem
169.   label="过滤条件"
170.   extra={
171.     <Tooltip title={customSystemParams}>
172.       系统参数配置 
173.        <QuestionCircleOutlined />
174.      </Tooltip>
175.    }
176. >
177.   <Input.TextArea />
178. </FormItem><FormItem
179.   label="过滤条件"
180.   extra={
181.     <Tooltip title={customSystemParams}>
182.       系统参数配置 
183.        <QuestionCircleOutlined />
184.      </Tooltip>
185.    }
186. >
187.   <Input.TextArea />
188. </FormItem><FormItem
189.   label="过滤条件"
190.   extra={
191.     <Tooltip title={customSystemParams}>
192.       系统参数配置 
193.        <QuestionCircleOutlined />
194.      </Tooltip>
195.    }
196. >
197.   <Input.TextArea />
198. </FormItem><FormItem
199.   label="过滤条件"
200.   extra={
201.     <Tooltip title={customSystemParams}>
202.       系统参数配置 
203.        <QuestionCircleOutlined />
204.      </Tooltip>
205.    }
206. >
207.   <Input.TextArea />
208. </FormItem>{ validator: utils.validateInputText(2, 20) },
209. <FormItem
210.   label="过滤条件"
211.   extra={
212.     <Tooltip title={customSystemParams}>
213.       系统参数配置 
214.        <QuestionCircleOutlined />
215.      </Tooltip>
216.    }
217. >
218.   <Input.TextArea />
219. </FormItem><FormItem
220.   label="过滤条件"
221.   extra={
222.     <Tooltip title={customSystemParams}>
223.       系统参数配置 
224.        <QuestionCircleOutlined />
225.      </Tooltip>
226.    }
227. >
228.   <Input.TextArea />
229. </FormItem><FormItem
230.   label="过滤条件"
231.   extra={
232.     <Tooltip title={customSystemParams}>
233.       系统参数配置 
234.        <QuestionCircleOutlined />
235.      </Tooltip>
236.    }
237. >
238.   <Input.TextArea />
239. </FormItem>]}
240. <FormItem
241.   label="过滤条件"
242.   extra={
243.     <Tooltip title={customSystemParams}>
244.       系统参数配置 
245.        <QuestionCircleOutlined />
246.      </Tooltip>
247.    }
248. >
249.   <Input.TextArea />
250. </FormItem><FormItem
251.   label="过滤条件"
252.   extra={
253.     <Tooltip title={customSystemParams}>
254.       系统参数配置 
255.        <QuestionCircleOutlined />
256.      </Tooltip>
257.    }
258. >
259.   <Input.TextArea />
260. </FormItem>>
261. <FormItem
262.   label="过滤条件"
263.   extra={
264.     <Tooltip title={customSystemParams}>
265.       系统参数配置 
266.        <QuestionCircleOutlined />
267.      </Tooltip>
268.    }
269. >
270.   <Input.TextArea />
271. </FormItem><FormItem
272.   label="过滤条件"
273.   extra={
274.     <Tooltip title={customSystemParams}>
275.       系统参数配置 
276.        <QuestionCircleOutlined />
277.      </Tooltip>
278.    }
279. >
280.   <Input.TextArea />
281. </FormItem><FormItem
282.   label="过滤条件"
283.   extra={
284.     <Tooltip title={customSystemParams}>
285.       系统参数配置 
286.        <QuestionCircleOutlined />
287.      </Tooltip>
288.    }
289. >
290.   <Input.TextArea />
291. </FormItem><Input placeholder="请输入标签名称" style={{ width: '90%', marginRight: 8 }} />
292. <FormItem
293.   label="过滤条件"
294.   extra={
295.     <Tooltip title={customSystemParams}>
296.       系统参数配置 
297.        <QuestionCircleOutlined />
298.      </Tooltip>
299.    }
300. >
301.   <Input.TextArea />
302. </FormItem><FormItem
303.   label="过滤条件"
304.   extra={
305.     <Tooltip title={customSystemParams}>
306.       系统参数配置 
307.        <QuestionCircleOutlined />
308.      </Tooltip>
309.    }
310. >
311.   <Input.TextArea />
312. </FormItem></Form.Item>
313. <FormItem
314.   label="过滤条件"
315.   extra={
316.     <Tooltip title={customSystemParams}>
317.       系统参数配置 
318.        <QuestionCircleOutlined />
319.      </Tooltip>
320.    }
321. >
322.   <Input.TextArea />
323. </FormItem><FormItem
324.   label="过滤条件"
325.   extra={
326.     <Tooltip title={customSystemParams}>
327.       系统参数配置 
328.        <QuestionCircleOutlined />
329.      </Tooltip>
330.    }
331. >
332.   <Input.TextArea />
333. </FormItem> <i className="iconfont iconicon_deletecata" onClick={() => this.removeNewTag(k)} />
334. <FormItem
335.   label="过滤条件"
336.   extra={
337.     <Tooltip title={customSystemParams}>
338.       系统参数配置 
339.        <QuestionCircleOutlined />
340.      </Tooltip>
341.    }
342. >
343.   <Input.TextArea />
344. </FormItem></Form.Item>
345. ));

复制代码

● Tooltip
Form 支持属性 tooltip，能够在 label 后产生一个问号直接做提示。


● extra
针对于想放置于组件下面内容可以使用 extra 来实现。

1. <FormItem
2.   label="过滤条件"
3.   extra={
4.     <Tooltip title={customSystemParams}>
5.       系统参数配置 
6.        <QuestionCircleOutlined />
7.      </Tooltip>
8.    }
9. >
10.   <Input.TextArea />
11. </FormItem>

复制代码

● Form 在数栈的变化
通过这次 UI 升级和 antd 升级之后，Form 表单在数栈中的应用发生了较大的变化，从老版本的 label/component 横向排版改为了纵向改版，在横向空间不⾜的情况下，使⽤上下结构能有效提⾼填写表单的效率。

Select

● rc-select
· 底层重写
• 解决些许历史问题
1）rc-select & rc-select-tree 的 inputValue & searchValue 之争。rc-select-tree 是 rc-select 结合 tree 写的一个组件，相似但又不同，searchValue 就是其中一点，也不是没人提过 issue，只是人的忘性很大，时间长了就忘了、混淆了，导致在 rc-select 中甚至出现了 searchValue 的字样。
2）inputValue 历史问题，this.state.inputValue。

3）onSelect 清空了值，又会被 onChange 赋值回来。
• 模块复用
在新版的 rc-select 中，antd 官方抽取了一个 generator 方法。它主要接收一个 OptionList 的自定义组件用于渲染下拉框部分。这样我们就可以直接复用选择框部分的代码，而自定义 Select 和 TreeSelect 对应的列表或者树形结构了。
● labelInValue
在 3.x 版本为 {key: string, label: ReactNode}
在 4.x 版本为 {value: string, label: ReactNode}
Table

● fixed

固定列时，文字过长导致错位的问题，被完美解决了。
· 历史原因
3.x 中对 table fixed 的实现，是写了两个 table, 顶层 fixed 的是一个，底层滚动的是一个，这样出现这种错位的问题就很好理解了。
要解决也不是没有办法，可以在特定的节点去测算表格列的高度，但是这个行为会导致重排，影响性能问题。
· 解决方案
4.x 中，table fixed 不在通过两个 table 来实现，他使用了一个 position 的新特性：position: sticky;
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移，偏移值不会影响任何其他元素的位置。
优点：
• 根据正常文档流进行定位
• 相对最近滚动祖先 & 最近块级祖先进行偏移
缺点：

• 不兼容<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>{<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>this.setState(<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>{<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>current: pagination.current,<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>},<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>this.search<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>);};search = (projectId?: any) => {<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>const { name, current } = this.state;<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>const { project } = this.props;<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>const params: any = {<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>projectId: projectId || project.id,<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>pageSize: 10,<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>currentPage: current || 1,<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>name: name || undefined,<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem><FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>removeAdmin: true,<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>};<FormItem
  label="过滤条件"
  extra={
    <Tooltip title={customSystemParams}>
      系统参数配置 
       <QuestionCircleOutlined />
     </Tooltip>
   }
>
  <Input.TextArea />
</FormItem>this.loadUsers(params);};[/code]antd4.0 对此做了修改，同 Form 的 name。

1. [table] `共${total}条`,<FormItem
2.   label="过滤条件"
3.   extra={
4.     <Tooltip title={customSystemParams}>
5.       系统参数配置 
6.        <QuestionCircleOutlined />
7.      </Tooltip>
8.    }
9. >
10.   <Input.TextArea />
11. </FormItem><FormItem
12.   label="过滤条件"
13.   extra={
14.     <Tooltip title={customSystemParams}>
15.       系统参数配置 
16.        <QuestionCircleOutlined />
17.      </Tooltip>
18.    }
19. >
20.   <Input.TextArea />
21. </FormItem>total: users.totalCount,<FormItem
22.   label="过滤条件"
23.   extra={
24.     <Tooltip title={customSystemParams}>
25.       系统参数配置 
26.        <QuestionCircleOutlined />
27.      </Tooltip>
28.    }
29. >
30.   <Input.TextArea />
31. </FormItem><FormItem
32.   label="过滤条件"
33.   extra={
34.     <Tooltip title={customSystemParams}>
35.       系统参数配置 
36.        <QuestionCircleOutlined />
37.      </Tooltip>
38.    }
39. >
40.   <Input.TextArea />
41. </FormItem>current,<FormItem
42.   label="过滤条件"
43.   extra={
44.     <Tooltip title={customSystemParams}>
45.       系统参数配置 
46.        <QuestionCircleOutlined />
47.      </Tooltip>
48.    }
49. >
50.   <Input.TextArea />
51. </FormItem><FormItem
52.   label="过滤条件"
53.   extra={
54.     <Tooltip title={customSystemParams}>
55.       系统参数配置 
56.        <QuestionCircleOutlined />
57.      </Tooltip>
58.    }
59. >
60.   <Input.TextArea />
61. </FormItem>pageSize,<FormItem
62.   label="过滤条件"
63.   extra={
64.     <Tooltip title={customSystemParams}>
65.       系统参数配置 
66.        <QuestionCircleOutlined />
67.      </Tooltip>
68.    }
69. >
70.   <Input.TextArea />
71. </FormItem>}}<FormItem
72.   label="过滤条件"
73.   extra={
74.     <Tooltip title={customSystemParams}>
75.       系统参数配置 
76.        <QuestionCircleOutlined />
77.      </Tooltip>
78.    }
79. >
80.   <Input.TextArea />
81. </FormItem>onChange={this.handleTableChange}<FormItem
82.   label="过滤条件"
83.   extra={
84.     <Tooltip title={customSystemParams}>
85.       系统参数配置 
86.        <QuestionCircleOutlined />
87.      </Tooltip>
88.    }
89. >
90.   <Input.TextArea />
91. </FormItem>style={{ height: tableScrollHeight }}<FormItem
92.   label="过滤条件"
93.   extra={
94.     <Tooltip title={customSystemParams}>
95.       系统参数配置 
96.        <QuestionCircleOutlined />
97.      </Tooltip>
98.    }
99. >
100.   <Input.TextArea />
101. </FormItem>loading={this.state.loading}<FormItem
102.   label="过滤条件"
103.   extra={
104.     <Tooltip title={customSystemParams}>
105.       系统参数配置 
106.        <QuestionCircleOutlined />
107.      </Tooltip>
108.    }
109. >
110.   <Input.TextArea />
111. </FormItem>columns={this.initColumns()}<FormItem
112.   label="过滤条件"
113.   extra={
114.     <Tooltip title={customSystemParams}>
115.       系统参数配置 
116.        <QuestionCircleOutlined />
117.      </Tooltip>
118.    }
119. >
120.   <Input.TextArea />
121. </FormItem>dataSource={users.data}<FormItem
122.   label="过滤条件"
123.   extra={
124.     <Tooltip title={customSystemParams}>
125.       系统参数配置 
126.        <QuestionCircleOutlined />
127.      </Tooltip>
128.    }
129. >
130.   <Input.TextArea />
131. </FormItem>scroll={{ x: 1100, y: tableScrollHeight }}/>handleTableChange = (pagination: any) => {<FormItem
132.   label="过滤条件"
133.   extra={
134.     <Tooltip title={customSystemParams}>
135.       系统参数配置 
136.        <QuestionCircleOutlined />
137.      </Tooltip>
138.    }
139. >
140.   <Input.TextArea />
141. </FormItem>this.setState(<FormItem
142.   label="过滤条件"
143.   extra={
144.     <Tooltip title={customSystemParams}>
145.       系统参数配置 
146.        <QuestionCircleOutlined />
147.      </Tooltip>
148.    }
149. >
150.   <Input.TextArea />
151. </FormItem><FormItem
152.   label="过滤条件"
153.   extra={
154.     <Tooltip title={customSystemParams}>
155.       系统参数配置 
156.        <QuestionCircleOutlined />
157.      </Tooltip>
158.    }
159. >
160.   <Input.TextArea />
161. </FormItem>{<FormItem
162.   label="过滤条件"
163.   extra={
164.     <Tooltip title={customSystemParams}>
165.       系统参数配置 
166.        <QuestionCircleOutlined />
167.      </Tooltip>
168.    }
169. >
170.   <Input.TextArea />
171. </FormItem><FormItem
172.   label="过滤条件"
173.   extra={
174.     <Tooltip title={customSystemParams}>
175.       系统参数配置 
176.        <QuestionCircleOutlined />
177.      </Tooltip>
178.    }
179. >
180.   <Input.TextArea />
181. </FormItem><FormItem
182.   label="过滤条件"
183.   extra={
184.     <Tooltip title={customSystemParams}>
185.       系统参数配置 
186.        <QuestionCircleOutlined />
187.      </Tooltip>
188.    }
189. >
190.   <Input.TextArea />
191. </FormItem>current: pagination.current,<FormItem
192.   label="过滤条件"
193.   extra={
194.     <Tooltip title={customSystemParams}>
195.       系统参数配置 
196.        <QuestionCircleOutlined />
197.      </Tooltip>
198.    }
199. >
200.   <Input.TextArea />
201. </FormItem><FormItem
202.   label="过滤条件"
203.   extra={
204.     <Tooltip title={customSystemParams}>
205.       系统参数配置 
206.        <QuestionCircleOutlined />
207.      </Tooltip>
208.    }
209. >
210.   <Input.TextArea />
211. </FormItem><FormItem
212.   label="过滤条件"
213.   extra={
214.     <Tooltip title={customSystemParams}>
215.       系统参数配置 
216.        <QuestionCircleOutlined />
217.      </Tooltip>
218.    }
219. >
220.   <Input.TextArea />
221. </FormItem>pageSize: pagination.pageSize,<FormItem
222.   label="过滤条件"
223.   extra={
224.     <Tooltip title={customSystemParams}>
225.       系统参数配置 
226.        <QuestionCircleOutlined />
227.      </Tooltip>
228.    }
229. >
230.   <Input.TextArea />
231. </FormItem><FormItem
232.   label="过滤条件"
233.   extra={
234.     <Tooltip title={customSystemParams}>
235.       系统参数配置 
236.        <QuestionCircleOutlined />
237.      </Tooltip>
238.    }
239. >
240.   <Input.TextArea />
241. </FormItem>},<FormItem
242.   label="过滤条件"
243.   extra={
244.     <Tooltip title={customSystemParams}>
245.       系统参数配置 
246.        <QuestionCircleOutlined />
247.      </Tooltip>
248.    }
249. >
250.   <Input.TextArea />
251. </FormItem><FormItem
252.   label="过滤条件"
253.   extra={
254.     <Tooltip title={customSystemParams}>
255.       系统参数配置 
256.        <QuestionCircleOutlined />
257.      </Tooltip>
258.    }
259. >
260.   <Input.TextArea />
261. </FormItem>this.search<FormItem
262.   label="过滤条件"
263.   extra={
264.     <Tooltip title={customSystemParams}>
265.       系统参数配置 
266.        <QuestionCircleOutlined />
267.      </Tooltip>
268.    }
269. >
270.   <Input.TextArea />
271. </FormItem>);};search = (projectId?: any) => {<FormItem
272.   label="过滤条件"
273.   extra={
274.     <Tooltip title={customSystemParams}>
275.       系统参数配置 
276.        <QuestionCircleOutlined />
277.      </Tooltip>
278.    }
279. >
280.   <Input.TextArea />
281. </FormItem>const { name, current, pageSize } = this.state;<FormItem
282.   label="过滤条件"
283.   extra={
284.     <Tooltip title={customSystemParams}>
285.       系统参数配置 
286.        <QuestionCircleOutlined />
287.      </Tooltip>
288.    }
289. >
290.   <Input.TextArea />
291. </FormItem>const { project } = this.props;<FormItem
292.   label="过滤条件"
293.   extra={
294.     <Tooltip title={customSystemParams}>
295.       系统参数配置 
296.        <QuestionCircleOutlined />
297.      </Tooltip>
298.    }
299. >
300.   <Input.TextArea />
301. </FormItem>const params: any = {<FormItem
302.   label="过滤条件"
303.   extra={
304.     <Tooltip title={customSystemParams}>
305.       系统参数配置 
306.        <QuestionCircleOutlined />
307.      </Tooltip>
308.    }
309. >
310.   <Input.TextArea />
311. </FormItem><FormItem
312.   label="过滤条件"
313.   extra={
314.     <Tooltip title={customSystemParams}>
315.       系统参数配置 
316.        <QuestionCircleOutlined />
317.      </Tooltip>
318.    }
319. >
320.   <Input.TextArea />
321. </FormItem>projectId: projectId || project.id,<FormItem
322.   label="过滤条件"
323.   extra={
324.     <Tooltip title={customSystemParams}>
325.       系统参数配置 
326.        <QuestionCircleOutlined />
327.      </Tooltip>
328.    }
329. >
330.   <Input.TextArea />
331. </FormItem><FormItem
332.   label="过滤条件"
333.   extra={
334.     <Tooltip title={customSystemParams}>
335.       系统参数配置 
336.        <QuestionCircleOutlined />
337.      </Tooltip>
338.    }
339. >
340.   <Input.TextArea />
341. </FormItem>pageSize,<FormItem
342.   label="过滤条件"
343.   extra={
344.     <Tooltip title={customSystemParams}>
345.       系统参数配置 
346.        <QuestionCircleOutlined />
347.      </Tooltip>
348.    }
349. >
350.   <Input.TextArea />
351. </FormItem><FormItem
352.   label="过滤条件"
353.   extra={
354.     <Tooltip title={customSystemParams}>
355.       系统参数配置 
356.        <QuestionCircleOutlined />
357.      </Tooltip>
358.    }
359. >
360.   <Input.TextArea />
361. </FormItem>currentPage: current || 1,<FormItem
362.   label="过滤条件"
363.   extra={
364.     <Tooltip title={customSystemParams}>
365.       系统参数配置 
366.        <QuestionCircleOutlined />
367.      </Tooltip>
368.    }
369. >
370.   <Input.TextArea />
371. </FormItem><FormItem
372.   label="过滤条件"
373.   extra={
374.     <Tooltip title={customSystemParams}>
375.       系统参数配置 
376.        <QuestionCircleOutlined />
377.      </Tooltip>
378.    }
379. >
380.   <Input.TextArea />
381. </FormItem>name: name || undefined,<FormItem
382.   label="过滤条件"
383.   extra={
384.     <Tooltip title={customSystemParams}>
385.       系统参数配置 
386.        <QuestionCircleOutlined />
387.      </Tooltip>
388.    }
389. >
390.   <Input.TextArea />
391. </FormItem><FormItem
392.   label="过滤条件"
393.   extra={
394.     <Tooltip title={customSystemParams}>
395.       系统参数配置 
396.        <QuestionCircleOutlined />
397.      </Tooltip>
398.    }
399. >
400.   <Input.TextArea />
401. </FormItem>removeAdmin: true,<FormItem
402.   label="过滤条件"
403.   extra={
404.     <Tooltip title={customSystemParams}>
405.       系统参数配置 
406.        <QuestionCircleOutlined />
407.      </Tooltip>
408.    }
409. >
410.   <Input.TextArea />
411. </FormItem>};<FormItem
412.   label="过滤条件"
413.   extra={
414.     <Tooltip title={customSystemParams}>
415.       系统参数配置 
416.        <QuestionCircleOutlined />
417.      </Tooltip>
418.    }
419. >
420.   <Input.TextArea />
421. </FormItem>this.loadUsers(params);};

复制代码

另外，一些同学在 Table 中既写了 onChange，也写了 onShowSizeChange，这个时候要注意，当切换页码条数的时候两个方法都会触发，onShowSizeChange 先触发，onChange 后触发，这个时候如果 onChange 内未对 pageSize 做处理可能导致切页失败，看下面代码就明白了，写的时候稍微注意一下即可。

● table sorter columnKey

· 问题描述
表格中如果要对表格某一字段进行排序需要在 columns item 里设置 sorter 字段，然后在 onChange 里拿到 sorter 对象进行参数处理，再请求数据。
需要注意的是，很多用到了 sorter.columnKey 来进行判断，容易出现问题，sorter.columnKey === columns item.key，如果未设置 key，那么获取到的 columnKey 就为空，导致搜索失效，要么设置 key，再进行获取。同理， sorter.field === columns item.dataIndex，设置 dataIndex，通过 sorter.field 进行获取，两者都可以。

1. columns={<FormItem
2.   label="过滤条件"
3.   extra={
4.     <Tooltip title={customSystemParams}>
5.       系统参数配置 
6.        <QuestionCircleOutlined />
7.      </Tooltip>
8.    }
9. >
10.   <Input.TextArea />
11. </FormItem>[<FormItem
12.   label="过滤条件"
13.   extra={
14.     <Tooltip title={customSystemParams}>
15.       系统参数配置 
16.        <QuestionCircleOutlined />
17.      </Tooltip>
18.    }
19. >
20.   <Input.TextArea />
21. </FormItem><FormItem
22.   label="过滤条件"
23.   extra={
24.     <Tooltip title={customSystemParams}>
25.       系统参数配置 
26.        <QuestionCircleOutlined />
27.      </Tooltip>
28.    }
29. >
30.   <Input.TextArea />
31. </FormItem>{<FormItem
32.   label="过滤条件"
33.   extra={
34.     <Tooltip title={customSystemParams}>
35.       系统参数配置 
36.        <QuestionCircleOutlined />
37.      </Tooltip>
38.    }
39. >
40.   <Input.TextArea />
41. </FormItem><FormItem
42.   label="过滤条件"
43.   extra={
44.     <Tooltip title={customSystemParams}>
45.       系统参数配置 
46.        <QuestionCircleOutlined />
47.      </Tooltip>
48.    }
49. >
50.   <Input.TextArea />
51. </FormItem><FormItem
52.   label="过滤条件"
53.   extra={
54.     <Tooltip title={customSystemParams}>
55.       系统参数配置 
56.        <QuestionCircleOutlined />
57.      </Tooltip>
58.    }
59. >
60.   <Input.TextArea />
61. </FormItem>title: '创建时间',<FormItem
62.   label="过滤条件"
63.   extra={
64.     <Tooltip title={customSystemParams}>
65.       系统参数配置 
66.        <QuestionCircleOutlined />
67.      </Tooltip>
68.    }
69. >
70.   <Input.TextArea />
71. </FormItem><FormItem
72.   label="过滤条件"
73.   extra={
74.     <Tooltip title={customSystemParams}>
75.       系统参数配置 
76.        <QuestionCircleOutlined />
77.      </Tooltip>
78.    }
79. >
80.   <Input.TextArea />
81. </FormItem><FormItem
82.   label="过滤条件"
83.   extra={
84.     <Tooltip title={customSystemParams}>
85.       系统参数配置 
86.        <QuestionCircleOutlined />
87.      </Tooltip>
88.    }
89. >
90.   <Input.TextArea />
91. </FormItem>dataIndex: 'gmtCreate1',<FormItem
92.   label="过滤条件"
93.   extra={
94.     <Tooltip title={customSystemParams}>
95.       系统参数配置 
96.        <QuestionCircleOutlined />
97.      </Tooltip>
98.    }
99. >
100.   <Input.TextArea />
101. </FormItem><FormItem
102.   label="过滤条件"
103.   extra={
104.     <Tooltip title={customSystemParams}>
105.       系统参数配置 
106.        <QuestionCircleOutlined />
107.      </Tooltip>
108.    }
109. >
110.   <Input.TextArea />
111. </FormItem><FormItem
112.   label="过滤条件"
113.   extra={
114.     <Tooltip title={customSystemParams}>
115.       系统参数配置 
116.        <QuestionCircleOutlined />
117.      </Tooltip>
118.    }
119. >
120.   <Input.TextArea />
121. </FormItem>key: 'aa',<FormItem
122.   label="过滤条件"
123.   extra={
124.     <Tooltip title={customSystemParams}>
125.       系统参数配置 
126.        <QuestionCircleOutlined />
127.      </Tooltip>
128.    }
129. >
130.   <Input.TextArea />
131. </FormItem><FormItem
132.   label="过滤条件"
133.   extra={
134.     <Tooltip title={customSystemParams}>
135.       系统参数配置 
136.        <QuestionCircleOutlined />
137.      </Tooltip>
138.    }
139. >
140.   <Input.TextArea />
141. </FormItem><FormItem
142.   label="过滤条件"
143.   extra={
144.     <Tooltip title={customSystemParams}>
145.       系统参数配置 
146.        <QuestionCircleOutlined />
147.      </Tooltip>
148.    }
149. >
150.   <Input.TextArea />
151. </FormItem>sorter: true,<FormItem
152.   label="过滤条件"
153.   extra={
154.     <Tooltip title={customSystemParams}>
155.       系统参数配置 
156.        <QuestionCircleOutlined />
157.      </Tooltip>
158.    }
159. >
160.   <Input.TextArea />
161. </FormItem><FormItem
162.   label="过滤条件"
163.   extra={
164.     <Tooltip title={customSystemParams}>
165.       系统参数配置 
166.        <QuestionCircleOutlined />
167.      </Tooltip>
168.    }
169. >
170.   <Input.TextArea />
171. </FormItem><FormItem
172.   label="过滤条件"
173.   extra={
174.     <Tooltip title={customSystemParams}>
175.       系统参数配置 
176.        <QuestionCircleOutlined />
177.      </Tooltip>
178.    }
179. >
180.   <Input.TextArea />
181. </FormItem>render(n: any, record: any) {<FormItem
182.   label="过滤条件"
183.   extra={
184.     <Tooltip title={customSystemParams}>
185.       系统参数配置 
186.        <QuestionCircleOutlined />
187.      </Tooltip>
188.    }
189. >
190.   <Input.TextArea />
191. </FormItem><FormItem
192.   label="过滤条件"
193.   extra={
194.     <Tooltip title={customSystemParams}>
195.       系统参数配置 
196.        <QuestionCircleOutlined />
197.      </Tooltip>
198.    }
199. >
200.   <Input.TextArea />
201. </FormItem><FormItem
202.   label="过滤条件"
203.   extra={
204.     <Tooltip title={customSystemParams}>
205.       系统参数配置 
206.        <QuestionCircleOutlined />
207.      </Tooltip>
208.    }
209. >
210.   <Input.TextArea />
211. </FormItem><FormItem
212.   label="过滤条件"
213.   extra={
214.     <Tooltip title={customSystemParams}>
215.       系统参数配置 
216.        <QuestionCircleOutlined />
217.      </Tooltip>
218.    }
219. >
220.   <Input.TextArea />
221. </FormItem>return DateTime.formatDateTime(record.gmtCreate);<FormItem
222.   label="过滤条件"
223.   extra={
224.     <Tooltip title={customSystemParams}>
225.       系统参数配置 
226.        <QuestionCircleOutlined />
227.      </Tooltip>
228.    }
229. >
230.   <Input.TextArea />
231. </FormItem><FormItem
232.   label="过滤条件"
233.   extra={
234.     <Tooltip title={customSystemParams}>
235.       系统参数配置 
236.        <QuestionCircleOutlined />
237.      </Tooltip>
238.    }
239. >
240.   <Input.TextArea />
241. </FormItem><FormItem
242.   label="过滤条件"
243.   extra={
244.     <Tooltip title={customSystemParams}>
245.       系统参数配置 
246.        <QuestionCircleOutlined />
247.      </Tooltip>
248.    }
249. >
250.   <Input.TextArea />
251. </FormItem>}<FormItem
252.   label="过滤条件"
253.   extra={
254.     <Tooltip title={customSystemParams}>
255.       系统参数配置 
256.        <QuestionCircleOutlined />
257.      </Tooltip>
258.    }
259. >
260.   <Input.TextArea />
261. </FormItem><FormItem
262.   label="过滤条件"
263.   extra={
264.     <Tooltip title={customSystemParams}>
265.       系统参数配置 
266.        <QuestionCircleOutlined />
267.      </Tooltip>
268.    }
269. >
270.   <Input.TextArea />
271. </FormItem>},<FormItem
272.   label="过滤条件"
273.   extra={
274.     <Tooltip title={customSystemParams}>
275.       系统参数配置 
276.        <QuestionCircleOutlined />
277.      </Tooltip>
278.    }
279. >
280.   <Input.TextArea />
281. </FormItem><FormItem
282.   label="过滤条件"
283.   extra={
284.     <Tooltip title={customSystemParams}>
285.       系统参数配置 
286.        <QuestionCircleOutlined />
287.      </Tooltip>
288.    }
289. >
290.   <Input.TextArea />
291. </FormItem>...<FormItem
292.   label="过滤条件"
293.   extra={
294.     <Tooltip title={customSystemParams}>
295.       系统参数配置 
296.        <QuestionCircleOutlined />
297.      </Tooltip>
298.    }
299. >
300.   <Input.TextArea />
301. </FormItem>]}onChange={(pagination: any, filters: any, sorter: any) {<FormItem
302.   label="过滤条件"
303.   extra={
304.     <Tooltip title={customSystemParams}>
305.       系统参数配置 
306.        <QuestionCircleOutlined />
307.      </Tooltip>
308.    }
309. >
310.   <Input.TextArea />
311. </FormItem>console.log(pagination, '--pagination');<FormItem
312.   label="过滤条件"
313.   extra={
314.     <Tooltip title={customSystemParams}>
315.       系统参数配置 
316.        <QuestionCircleOutlined />
317.      </Tooltip>
318.    }
319. >
320.   <Input.TextArea />
321. </FormItem>console.log(filters, '--filters');<FormItem
322.   label="过滤条件"
323.   extra={
324.     <Tooltip title={customSystemParams}>
325.       系统参数配置 
326.        <QuestionCircleOutlined />
327.      </Tooltip>
328.    }
329. >
330.   <Input.TextArea />
331. </FormItem>console.log(sorter, '--sorter');}}

复制代码

● Table 在数栈的变化
通过这次 UI 升级和 antd 升级之后，表格在数栈中的应用发生了较大的变化，减⼩了表格默认⾼度，增加⼀屏可浏览的数据数量。

Tree

Tree 组件取消 value 属性，现在只需要添加 key 属性即可。
特别注意， 此问题会导致功能出问题，需要重点关注！！！
在项目中经常在 TreeItem 中增加参数，如：< TreeItem value={value} data={data} >。在拖拽等回调中就可以通过 nodeData.props.data 的方式获取到 data 的值。但在 antd4 中，获取参数的数据结构发生了改变，原先直接通过 props 点出来的不行了。
· 有两种方式取值：
1）不使用props。直接采用 nodeData.data 的方式，也可以直接拿到。
2）继续使用 props。在antd4中，还是可以通过 props 找到参数，只不过 antd 会把所有参数使用 data 进行包裹，就需要改成 nodeData.props.data.data。
· 新版数据结构如下：

· drag
拖拽节点位置的确定与 3.x 相比进行了变更，官网并没有说明。具体如下图：

左侧为 3.x，右侧为 4.x。
在3.x版本，只要把节点拖拽成目标节点的上中下，即代表着目标节点的同级上方，子集，同级下方；
在 4.x 版本，是根据当前拖拽节点与目标节点的相对位置进行确定最终的拖拽结果。
当拖拽节点处于目标节点的下方，且相对左侧对齐的位置趋近于零，则最终的位置为目标节点的同级下方。

当拖拽节点处于目标节点的下方，且相对左侧一个缩近的位置，则最终的位置为目标节点的子集。

当拖拽节点处于目标节点的上方，且相对左侧对齐的位置趋近于零，则最终的位置为目标节点的同级上方。

Pagination

Pagination自 4.1.0 版本起，会默认将 showSizeChanger 参数设置为 true ，因而在数据条数超过50时，pageSize 切换器会默认显示。这个变化同样适用于 Table 组件，可通过 showSizeChanger: false 关闭。
如果 size 属性值为 small，则删除 size 属性。
Drawer

当我们在 Drawer 上 设置了 getContainer={false} 属性之后，Drawer 会添加上 .ant-drawer-inline 的类名导致我们 position: fixed 失效。

Button

在 antd 3.0 中危险按钮采用 type。

使用如下：涉及改动点 type、dangr 属性。

Tabs

使标签页不被选中。

1. {
2.   title: '账号',
3.   dataIndex: ['user', 'userName'],
4.   key: 'userName',
5.   width: 200,
6. }

复制代码

总结

该篇文章详细讲解了数栈前端团队如何从 antd3 升级到 antd4 的详细步骤，以及团队在实践过程中发现的一些问题和对应的解决方案，为后续产品的开发体验打了基础，也提供了一种更好的交互体验。
未来数栈前端团队将会持续关注产品体验以及开发中的技术痛点，以开发更好的产品为导向，助力业务发展。
《数据治理行业实践白皮书》下载地址：https://fs80.cn/380a4b
想了解或咨询更多有关袋鼠云大数据产品、行业解决方案、客户案例的朋友，浏览袋鼠云官网：https://www.dtstack.com/?src=szbky
同时，欢迎对大数据开源项目有兴趣的同学加入「袋鼠云开源框架钉钉技术qun」，交流最新开源技术信息，qun号码：30537511，项目地址：https://github.com/DTStack

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！