我对ant-design之Form表单的组件的初步理解

       今天看了ant-design文档的Form表单,由于之前也看了一下,但是总感觉它的api方法很多,所以就产生了抵触感。今晚又看了一遍,里面好多的细节,实实在在的需要下功夫去理解。那就谈谈今天理解的东西和存在的盲点吧!

       因为伙伴们之前写的代码里的很多东西(包括属性)看了一遍都不知道是干啥的,懵逼加载中...,所以自己就决定从最基础的例子看起,我现在看了里面的全部的例子,给我最直观的感受就是Form里面的Form.Item这个标签的作用很大,因为它到处存在,以前对于传统的表单进行提交,知识‘简单’的提交,而今天的这个Form组件,不光在进行操作表单域值方面很方面,而且它还具有很强的交互性和反馈性,我认为这一点就是与传统表单的最大区别。

      看到这里,我最印象深刻的就是他们好像都是通过this.props.from对象里面的一个方法getFieldDecorator(id, options)最有兴趣,而且好像很多地方都用它。它的第一个参数就是id,这里是对当前每个控件的唯一标识,第二个参数就是一些配置属性,是一个对象。它里面的属性最记忆深刻的有三个valuePropName、initialValue、rules(这是一个数组对象),第一个是对一个控件的直接属性进行设置,比如,对复选框进行操作,那么valuePropName就可以操作'checked'属性,然后搭配initialValue可以设置checked属性的初始值,rules是一个数组,里面包裹的是对象,这里看到对象中的key有type、message、required等。还有两个方法不得不说就是resetFields、getFieldsValue、setFieldsValue,这两个应该在表单的添加和编辑中用到的很多吧。对于resetFields这个方法我还是很吃惊的,它相比自己手动去重置表单,真是节省了很多代码,到这里我起码不是像当初那么排斥这个组件了,因为我看到了它的便利性的一面,虽然我还没使用它。

      最后,还想说一点,对于hasFeedback这个属性,Bootstrap里面也有对于输入域的检查,具体那个代码长啥样给忘掉了。在这里它只需要配合validateStatus这个属性(它有四种状态:success、warning、error、validating)可以分别显示不同的反馈图标。其它的还有help什么的,这些东西需要多使用,多看只是让你知道有这么个东西存在,加油!🆙

推荐阅读更多精彩内容