antd3.x中的form

时间:2022-07-23
本文章向大家介绍antd3.x中的form,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

最近在维护公司的中台erp系统,项目中js库用的是react,ui库用的是antd。平时还是喜欢自己写css,刚开始还是有点不太习惯直接上ui库做项目,觉得用antd还是挺恶心的,主要是form。在熟悉了以后发现这个库真棒。

react缺少类似vue的v-model这样的双向绑定机制, 所以在做表单的时候需要手动监听keyup,input,blur这一类的事件,会显得稍微麻烦一些。而antd中的form则出了一个类似v-model的类似方法。它不仅仅提供了双向绑定功能,而且它还具有校验,取值,赋值,重置,数据搜集,提交功能。antd官网

双向绑定:getFieldDecorator

用法:该方法用在表单的子域里面,通过this.props.form.getFieldDecorator(id, options)进行使用,其中id为输入控件的唯一标志,而options为一些基本的数据规则配置等等,详情查看

常见用法
 <Form.Item label="Note">
   {getFieldDecorator('username', {
       rules: [{ required: true, message: 'Please input your note!' }],
   })(<Input />)}
</Form.Item>

虽然有双向绑定,但是在某些时候,也会用到设置值与获取值的方法,则会使用到setFieldsValue,getFieldsValue,getFieldValue。注意:要使用这些api,一定要把对应的 field 用 getFieldDecorator 进行注册。

设置值:setFieldsValue

通过setFieldsValue对其他控件进行赋值。

常见用法
this.props.form.setFieldsValue({
      username: 'kyle',
});

取值: getFieldsValue,getFieldValue

通过getFieldsValue对一组数据进行取值,getFieldValue对单个数据进行取值。

用法

获取全部数据

this.props.getFieldsValue()

获取filed为username的数据

this.props.getFieldValue('username')

校验:validateFields

校验方法会校验在双向绑定getFieldDecorator中定义必填项required为true的所有字段

form.validateFields((err,value) => {
        if(!err){
            return;  // 这里是通过校验的执行,未通过的则会在对应表单进行提示
        }
    }
)

重置表单:resetFields

this.props.form.resetFields()

提交数据

这个类似于,通过使用form的onSubmit事件,在提交的button上进行

用法如下
<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
          <Button type="primary" htmlType="submit"> //这里定义htmlType类似于原生js定义button的type
            Submit
          </Button>
    </Form.Item>
</Form>