antd组件库-表单的使用
antd组件库-表单的使用
1. Form标签上的常用属性
- labelCol: { span: number, offset: number } 标签的样式设置（span表示占多少单元的宽度，offset表示偏移多少单元的宽度，宽度与Row, Col的分配类似）
- wrapperCol: { span: number, offset: number} 同labelCol
- hideRequiredMark: true | false 是否隐藏（*）标志
2. 数据绑定、数据校验
步骤如下：
- 导入antd的Form组件：
import {
Form } from antd
- 在组件定义最前面使用@Form.create()方法，将Form组件实例拥有的方法注入到props.form中，如：
@Form.create()
export default class XXX extends Component {
}
- 设置表单结构：
render () {
const {
form: {
getFieldDecorator } } = this.props
return (
<Form labelCol={
{
span: 4 }} wrapperCol={
{
span: 20 }}>
<Form.Item label=用户名>
{
getFieldDecorator (username, {
rules: [
{
required: true, message: 请输入用户名 }
]
})(<Input placeholder=请输入用户名 />)
}
</Form.Item>
</Form>
)
}
- 点击按钮进行校验
const {
form: {
validateFields } } = this.form
// 方式一
validateFields().then(valueObj => {
// 此处执行校验成功的逻辑
}).catch(error => console.log(error))
// 方式二
validateFields((error, valueObj) => {
if(error) return
// 此处执行校验成功的逻辑
})
// 方式三
await validateFields()
// 此处执行校验成功的逻辑
3. 其它使用细节
- 数据校验： rule配置校验规则：
- 自定义校验 validateStatus: ‘success’ | ‘error’ | ‘warning’ | ‘validating’ 校验状态 help: ‘错误提示信息’ hasFeedback: true | false 是否展示反馈图标 用法举例：
<Form> <Form.Item validateStatus=error help=请输入内容> <Input placeholder=请输入内容 /> </Form.Item> </Form>
- 常用方法 3.1 获取对应字段的值： getFieldValue(‘字段名称’) 3.2 设置字段值： setFieldsValue({ 字段名1: 字段值1, 字段名2：字段值2 }) 3.3 表单验证 validateFields((error, valuesObj) => {}) // 校验所有字段 validateFields([‘字段1’, ‘字段2’]， (error, valuesObj) => {}) // 校验指定字段 validateFields([‘字段1’, ‘字段2’]，options, (error, valuesObj) => {})
// options.first: true | false // 对每个校验字段而言，如果前面的校验规则未通过，则后面的规则不再校验 // options.firstFields: [‘字段1’, ‘字段2’] // 对于指定的字段而言，如果前面的校验规则未通过，则后面的规则不再校验 3.4 resetFields() // 重置表单（有初始值则重置为初始值，无初始值清空表单）