关于ant-design Form表单使用的小技巧

本文简单分析了下 Form 组件的特点，以及定制化输入组件的封装技巧，希望对大家有所帮助。

Formcreate() 返回一个HOC，将内部创建的 form 对象通过 props 传递给 FormDemo 组件， form 提供的 getFiledDecorator api从用法上看也是一个HOC，通过该api包装后的 Input 组件已经和 FormDemo 上层的HOC双向绑定，我们可以通过 formvalidateFields 做表单域校验，获取表单值等 *** 作。

实际上 formgetFiledDecorator() 返回的HOC给包裹的组件设置了 value 和 onChange 两个props，顶层HOC在提供的 onChange 内部劫持组件的输入变化，保存状态，同步 value ，从而实现双向绑定。

经过分析，实际上 formgetFiledDecorator 包裹的组件不一定非得是 antd 提供的输入组件，我们自己也可以封装针对特定业务场景使用的复杂组件，只要在组件内部绑定来自HOC的 value 以及触发来自HOC的 onChange 事件，即可实现和 form 的双向绑定，从而充分利用 Form 组件的特性。

好久不写ant脚本了，最近两天在用ant做web应用的安装部署脚本，为了实现web服务器的多版本兼容，必然要使用逻辑判断，比如我要判断是安装在weblogic8上还是weblogic9上，而在ant中处理逻辑判断真是麻烦，只能作用于task，要利用property来做判断，使用available来设置property。例如：

上面判断一个文件，如果存在的话 fileIsExists 就为true，echoDemo这个task在执行前会先判断fileIsExists 是否为true如果不为true就不执行了。c盘下面有123txt的话会打印hello ant 否则不会打印。

这里面还有一个小陷阱，我习惯使用antcall，不喜欢使用depends，但是使用antcall的话就会有问题，例如我最开始这么写的，就不行。

使用antcall的话在echoDemo这个task执行的时候fileIsExists这个属性永远不为true，即便在执行完detectfile后它已经为true了，但是它不会被传递到下一个task，没用深入研究过ant，所以具体内部实现还不了解。

下面是ant的官方参考文档

更复杂的可以参考

1 datePicker所加的className 类名作用的范围是输入框，不能控制展开的下拉框样式

2 展开的日历框的位置是相对于body，并不在 <div id='root'>中，而且层级较高，为1050，超过了Modal组件的层级，官方提供的dropdownClassName 属性并不能加上类名，需用popupStyle加在DatePicker 上，可通过这种方法来解决层级过高的问题。

3 Mode属性为year/mode 不能选中

4 结合mode属性，Modal组件也是相对的body的组件，不在root范围内，层级为1000，层级问题可通过 wrapClassName 属性解决 ，但是如果多个modal覆盖出现，或modal中datePicker，也会出现层级问题，这时可以单个设置，也可以根据业务利用js直接提高 ，我在项目中有一个d框是一定要显示在最上面，因此用的js控制。

5antd所增加的类名都会带有后缀，如果只是更改css没有影响，如果想利用js去控制css，需查询DOM去获取到真是的类名

以上就是关于关于ant-design Form表单使用的小技巧全部的内容，包括:关于ant-design Form表单使用的小技巧、怎样通过ant脚本获取某个路径、Ant-design dataPicker组件所遇问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！