ToB企服应用市场:ToB评测及商务社交产业平台

标题: 详细剖析|袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路 [打印本页]

作者: 莱莱    时间: 2023-3-4 03:45
标题: 详细剖析|袋鼠云数栈前端框架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
  3. # 或者全局安装
  4. # 使用 npm
  5. npm i -g @ant-design/codemod-v4
  6. # 或者使用 yarn
  7. yarn global add @ant-design/codemod-v4
  8. # 运行
  9. 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';
  3. const Demo = () => (
  4. <FormItem
  5.   label="过滤条件"
  6.   extra={
  7.     <Tooltip title={customSystemParams}>
  8.       系统参数配置 
  9.        <QuestionCircleOutlined />
  10.      </Tooltip>
  11.    }
  12. >
  13.   <Input.TextArea />
  14. </FormItem>
  15. <FormItem
  16.   label="过滤条件"
  17.   extra={
  18.     <Tooltip title={customSystemParams}>
  19.       系统参数配置 
  20.        <QuestionCircleOutlined />
  21.      </Tooltip>
  22.    }
  23. >
  24.   <Input.TextArea />
  25. </FormItem><FormItem
  26.   label="过滤条件"
  27.   extra={
  28.     <Tooltip title={customSystemParams}>
  29.       系统参数配置 
  30.        <QuestionCircleOutlined />
  31.      </Tooltip>
  32.    }
  33. >
  34.   <Input.TextArea />
  35. </FormItem> <Icon type="smile" />
  36. <FormItem
  37.   label="过滤条件"
  38.   extra={
  39.     <Tooltip title={customSystemParams}>
  40.       系统参数配置 
  41.        <QuestionCircleOutlined />
  42.      </Tooltip>
  43.    }
  44. >
  45.   <Input.TextArea />
  46. </FormItem><FormItem
  47.   label="过滤条件"
  48.   extra={
  49.     <Tooltip title={customSystemParams}>
  50.       系统参数配置 
  51.        <QuestionCircleOutlined />
  52.      </Tooltip>
  53.    }
  54. >
  55.   <Input.TextArea />
  56. </FormItem> <SmileOutlined />
  57. <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> <Button icon={<SmileOutlined />} />
  78. <FormItem
  79.   label="过滤条件"
  80.   extra={
  81.     <Tooltip title={customSystemParams}>
  82.       系统参数配置 
  83.        <QuestionCircleOutlined />
  84.      </Tooltip>
  85.    }
  86. >
  87.   <Input.TextArea />
  88. </FormItem>
  89. );
复制代码
· 兼容
  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();
  14. <FormItem
  15.   label="过滤条件"
  16.   extra={
  17.     <Tooltip title={customSystemParams}>
  18.       系统参数配置 
  19.        <QuestionCircleOutlined />
  20.      </Tooltip>
  21.    }
  22. >
  23.   <Input.TextArea />
  24. </FormItem>React.useEffect(() => {
  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>form.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>}, []);
  109. <FormItem
  110.   label="过滤条件"
  111.   extra={
  112.     <Tooltip title={customSystemParams}>
  113.       系统参数配置 
  114.        <QuestionCircleOutlined />
  115.      </Tooltip>
  116.    }
  117. >
  118.   <Input.TextArea />
  119. </FormItem>return (
  120. <FormItem
  121.   label="过滤条件"
  122.   extra={
  123.     <Tooltip title={customSystemParams}>
  124.       系统参数配置 
  125.        <QuestionCircleOutlined />
  126.      </Tooltip>
  127.    }
  128. >
  129.   <Input.TextArea />
  130. </FormItem><FormItem
  131.   label="过滤条件"
  132.   extra={
  133.     <Tooltip title={customSystemParams}>
  134.       系统参数配置 
  135.        <QuestionCircleOutlined />
  136.      </Tooltip>
  137.    }
  138. >
  139.   <Input.TextArea />
  140. </FormItem><Form form={form} {...props}> ... </Form>
  141. <FormItem
  142.   label="过滤条件"
  143.   extra={
  144.     <Tooltip title={customSystemParams}>
  145.       系统参数配置 
  146.        <QuestionCircleOutlined />
  147.      </Tooltip>
  148.    }
  149. >
  150.   <Input.TextArea />
  151. </FormItem>)
  152. };
复制代码
· 如果是 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();
  13. <FormItem
  14.   label="过滤条件"
  15.   extra={
  16.     <Tooltip title={customSystemParams}>
  17.       系统参数配置 
  18.        <QuestionCircleOutlined />
  19.      </Tooltip>
  20.    }
  21. >
  22.   <Input.TextArea />
  23. </FormItem>componentDidMount() {
  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>this.formRef.current.setFieldsValue({
  45. <FormItem
  46.   label="过滤条件"
  47.   extra={
  48.     <Tooltip title={customSystemParams}>
  49.       系统参数配置 
  50.        <QuestionCircleOutlined />
  51.      </Tooltip>
  52.    }
  53. >
  54.   <Input.TextArea />
  55. </FormItem><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>username: 'Bamboo',
  76. <FormItem
  77.   label="过滤条件"
  78.   extra={
  79.     <Tooltip title={customSystemParams}>
  80.       系统参数配置 
  81.        <QuestionCircleOutlined />
  82.      </Tooltip>
  83.    }
  84. >
  85.   <Input.TextArea />
  86. </FormItem><FormItem
  87.   label="过滤条件"
  88.   extra={
  89.     <Tooltip title={customSystemParams}>
  90.       系统参数配置 
  91.        <QuestionCircleOutlined />
  92.      </Tooltip>
  93.    }
  94. >
  95.   <Input.TextArea />
  96. </FormItem>});
  97. <FormItem
  98.   label="过滤条件"
  99.   extra={
  100.     <Tooltip title={customSystemParams}>
  101.       系统参数配置 
  102.        <QuestionCircleOutlined />
  103.      </Tooltip>
  104.    }
  105. >
  106.   <Input.TextArea />
  107. </FormItem>}
  108. <FormItem
  109.   label="过滤条件"
  110.   extra={
  111.     <Tooltip title={customSystemParams}>
  112.       系统参数配置 
  113.        <QuestionCircleOutlined />
  114.      </Tooltip>
  115.    }
  116. >
  117.   <Input.TextArea />
  118. </FormItem>render() {
  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>return (
  140. <FormItem
  141.   label="过滤条件"
  142.   extra={
  143.     <Tooltip title={customSystemParams}>
  144.       系统参数配置 
  145.        <QuestionCircleOutlined />
  146.      </Tooltip>
  147.    }
  148. >
  149.   <Input.TextArea />
  150. </FormItem><FormItem
  151.   label="过滤条件"
  152.   extra={
  153.     <Tooltip title={customSystemParams}>
  154.       系统参数配置 
  155.        <QuestionCircleOutlined />
  156.      </Tooltip>
  157.    }
  158. >
  159.   <Input.TextArea />
  160. </FormItem><FormItem
  161.   label="过滤条件"
  162.   extra={
  163.     <Tooltip title={customSystemParams}>
  164.       系统参数配置 
  165.        <QuestionCircleOutlined />
  166.      </Tooltip>
  167.    }
  168. >
  169.   <Input.TextArea />
  170. </FormItem><Form ref={this.formRef}>
  171. <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><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><Form.Item name="username" rules={[{ required: true }]}>
  212. <FormItem
  213.   label="过滤条件"
  214.   extra={
  215.     <Tooltip title={customSystemParams}>
  216.       系统参数配置 
  217.        <QuestionCircleOutlined />
  218.      </Tooltip>
  219.    }
  220. >
  221.   <Input.TextArea />
  222. </FormItem><FormItem
  223.   label="过滤条件"
  224.   extra={
  225.     <Tooltip title={customSystemParams}>
  226.       系统参数配置 
  227.        <QuestionCircleOutlined />
  228.      </Tooltip>
  229.    }
  230. >
  231.   <Input.TextArea />
  232. </FormItem><FormItem
  233.   label="过滤条件"
  234.   extra={
  235.     <Tooltip title={customSystemParams}>
  236.       系统参数配置 
  237.        <QuestionCircleOutlined />
  238.      </Tooltip>
  239.    }
  240. >
  241.   <Input.TextArea />
  242. </FormItem><FormItem
  243.   label="过滤条件"
  244.   extra={
  245.     <Tooltip title={customSystemParams}>
  246.       系统参数配置 
  247.        <QuestionCircleOutlined />
  248.      </Tooltip>
  249.    }
  250. >
  251.   <Input.TextArea />
  252. </FormItem><FormItem
  253.   label="过滤条件"
  254.   extra={
  255.     <Tooltip title={customSystemParams}>
  256.       系统参数配置 
  257.        <QuestionCircleOutlined />
  258.      </Tooltip>
  259.    }
  260. >
  261.   <Input.TextArea />
  262. </FormItem><Input />
  263. <FormItem
  264.   label="过滤条件"
  265.   extra={
  266.     <Tooltip title={customSystemParams}>
  267.       系统参数配置 
  268.        <QuestionCircleOutlined />
  269.      </Tooltip>
  270.    }
  271. >
  272.   <Input.TextArea />
  273. </FormItem><FormItem
  274.   label="过滤条件"
  275.   extra={
  276.     <Tooltip title={customSystemParams}>
  277.       系统参数配置 
  278.        <QuestionCircleOutlined />
  279.      </Tooltip>
  280.    }
  281. >
  282.   <Input.TextArea />
  283. </FormItem><FormItem
  284.   label="过滤条件"
  285.   extra={
  286.     <Tooltip title={customSystemParams}>
  287.       系统参数配置 
  288.        <QuestionCircleOutlined />
  289.      </Tooltip>
  290.    }
  291. >
  292.   <Input.TextArea />
  293. </FormItem><FormItem
  294.   label="过滤条件"
  295.   extra={
  296.     <Tooltip title={customSystemParams}>
  297.       系统参数配置 
  298.        <QuestionCircleOutlined />
  299.      </Tooltip>
  300.    }
  301. >
  302.   <Input.TextArea />
  303. </FormItem></Form.Item>
  304. <FormItem
  305.   label="过滤条件"
  306.   extra={
  307.     <Tooltip title={customSystemParams}>
  308.       系统参数配置 
  309.        <QuestionCircleOutlined />
  310.      </Tooltip>
  311.    }
  312. >
  313.   <Input.TextArea />
  314. </FormItem><FormItem
  315.   label="过滤条件"
  316.   extra={
  317.     <Tooltip title={customSystemParams}>
  318.       系统参数配置 
  319.        <QuestionCircleOutlined />
  320.      </Tooltip>
  321.    }
  322. >
  323.   <Input.TextArea />
  324. </FormItem><FormItem
  325.   label="过滤条件"
  326.   extra={
  327.     <Tooltip title={customSystemParams}>
  328.       系统参数配置 
  329.        <QuestionCircleOutlined />
  330.      </Tooltip>
  331.    }
  332. >
  333.   <Input.TextArea />
  334. </FormItem></Form>
  335. <FormItem
  336.   label="过滤条件"
  337.   extra={
  338.     <Tooltip title={customSystemParams}>
  339.       系统参数配置 
  340.        <QuestionCircleOutlined />
  341.      </Tooltip>
  342.    }
  343. >
  344.   <Input.TextArea />
  345. </FormItem><FormItem
  346.   label="过滤条件"
  347.   extra={
  348.     <Tooltip title={customSystemParams}>
  349.       系统参数配置 
  350.        <QuestionCircleOutlined />
  351.      </Tooltip>
  352.    }
  353. >
  354.   <Input.TextArea />
  355. </FormItem>);
  356. <FormItem
  357.   label="过滤条件"
  358.   extra={
  359.     <Tooltip title={customSystemParams}>
  360.       系统参数配置 
  361.        <QuestionCircleOutlined />
  362.      </Tooltip>
  363.    }
  364. >
  365.   <Input.TextArea />
  366. </FormItem>}
  367. }
复制代码
当我们使用 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. );
  520. 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

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




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4