antd中Form及其getFieldDecorator的应用
import React from 'react'
import {Card,Form,Input,Button,message} from 'antd'
const FormItem= Form.Item;
class FormLogin extends React.Component{
handleSubmit=()=>{
let userInfo = this.props.form.getFieldsValue();
//此时这里得userInfo 与 values值是一样得
//getFieldsValue 获取一组输入控件的值,如不传入参数,则获取全部组件的值
// validateFields 校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件
console.log('Received values of userInfo: ', userInfo);
this.props.form.validateFields((err,values)=>{
if (!err) {
//message.success(`${values.username} 欢迎您`)
message.success(`${userInfo.username} 欢迎您`)
console.log('Received values of form: ', values);
} else {
}
})
}
render(){
const { getFieldDecorator} = this.props.form;
return (
<div>
<Card>
<Form title="水平方向表单" style={{width:300}}>
<FormItem>
{
getFieldDecorator('username',{
rules: [
{ required: true, message: '账号不能为空!' },
{min:5,max:10,message: '不再长度范围内!'},
],
})(
<Input placeholder="请输入账号" />
)}
</FormItem>
<FormItem >
{
getFieldDecorator('password',{
rules: [
{ required: true, message: '密码不能为空!' },
{min:5,max:10,message: '不再长度范围内!'}
],
})(
<Input placeholder="请输入密码"/>
)}
</FormItem>
<FormItem >
<Button type="primary" onClick={this.handleSubmit}>登录</Button>
</FormItem>
</Form>
</Card>
</div>
)
}
}
export default Form.create()(FormLogin);
- 经 Form.create() 包装过的组件会自带 this.props.form 属性
- 经 Form.create() 包装过的组件会自带 this.props.form 属性
- wrappedComponentRef用于获取表单中得元素
class CustomizedForm extends React.Component { ... }
let data = this.form.props.form.getFieldsValue();
// use wrappedComponentRef
const EnhancedForm = Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm
-
经过 Form.create 包装的组件将会自带 this.props.form 属性,this.props.form 提供的 API
-
let userInfo = this.props.form.getFieldsValue(); //获取表单中得所有值
-
this.props.form.validateFields //获取一组输入控件的值,如不传入参数,则获取全部组件的值
-
const { getFieldDecorator} = this.props.form;
getFieldDecorator
经过 getFieldDecorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
- 你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
- 你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue。
- 你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。
getFieldDecorator(id, options) 参数
- 布局
const formItemLayout = {
labelCol:{
xs:24,
sm:4
},
wrapperCol:{
xs:24,
sm:12
}
}
- Input 框
{
getFieldDecorator('username',{
//验证规则
rules: [
{ required: true, message: '账号不能为空!' },
{min:5,max:10,message: '不再长度范围内!'},
],
})(
<Input placeholder="请输入账号" />
)
}
- Radio
<FormItem label="性别" {...formItemLayout}>
{
getFieldDecorator('sex', {
initialValue: '1'
})(
<RadioGroup>
<Radio value="1">男</Radio>
<Radio value="2">女</Radio>
</RadioGroup>
)
}
</FormItem>
-InputNumber 数字输入框
<FormItem label="年龄" {...formItemLayout}>
{
getFieldDecorator('age', {
initialValue: 18
})(
<InputNumber />
)
}
</FormItem>
- Select 选择器
<FormItem label="当前状态" {...formItemLayout}>
{
getFieldDecorator('state', {
initialValue: '2'
})(
<Select>
<Option value="1">咸鱼</Option>
<Option value="2">浪子</Option>
<Option value="3">才子</Option>
</Select>
)
}
</FormItem>
- Switch 开关
<FormItem label="是否已婚" {...formItemLayout}>
{
getFieldDecorator('isMarried', {
valuePropName:'checked',
initialValue: true
})(
<Switch/>
)
}
</FormItem>