antd vue form 手动校验_「React干货」：使用antd模块的Form表单组件快速创建表单「一」...

点击上方关注订阅黑码教主获取更多精彩内容

antd + react

antd的Form组件有什么功能？

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

何时使用

• 用于创建一个实体或收集信息。
• 需要对输入的数据类型进行校验时。

基础使用

使用Form表单组件的基础外框，如果你使用class方式定义React组件，以下代码是常规使用方式。

import React, { Component } from 'react'import { Form } from 'antd';class HorizontalLoginForm extends Component { ...}const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm);ReactDOM.render(, mountNode);

表单子组件必须包含在Form组件内

render() { const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form; 

{getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username!' }], })( } placeholder="Username" />, )} ... }



我们来看下规则创建的注意点

{getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username!' }], })( } placeholder="Username" />, )}

其中，username为字段名，这相当于表单内元素的name值，在组件中，你只需取username的值就是这个input组件的值，如何取值，方面讲解

antd的form表单核心使用的是rc-form组件来进行数据收集、校验以及提交功能。

暴露的API

• getFieldDecorator: ƒ ()
• getFieldError: ƒ (name)
• getFieldInstance: ƒ ()
• getFieldProps: ƒ ()
• getFieldValue: ƒ (name)
• getFieldsError: ƒ (names)
• getFieldsValue: ƒ (names)
• isFieldTouched: ƒ (name)
• isFieldValidating: ƒ (name)
• isFieldsTouched: ƒ (ns)
• isFieldsValidating: ƒ (ns)
• isSubmitting: ƒ ()
• resetFields: ƒ ()
• setFields: ƒ ()
• setFieldsInitialValue: ƒ (initialValues)
• setFieldsValue: ƒ ()
• submit: ƒ ()
• validateFields: ƒ ()
• validateFieldsAndScroll: ƒ ()

使用方式例如：

this.props.form.getFieldValue('value1')

因篇幅问题，下篇讲解各使用示例

取值

this.props.form.getFieldValue('value1')或this.props.form.getFieldProps('normal').value

如果你觉得本篇还不错，请点赞关注！

文章由黑码教主创作，仅代表个人观点，配图源于网络版权归原作者所有，如有侵权联系删除！