import React, { Component } from 'react';
import { Form, Input,Select } from "antd";
const {Option} = Select;
class ModelForm extends Component {
render() {
//外部传过来的数据
console.log(this.props.modelData)
//将里边的数据进行解构出来
let {aaa,bbb,ccc} = this.props.modelData
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 4 },
},
wrapperCol: {
xs: { span: 20 },
},
};
return (
<Form {...formItemLayout}>
<Form.Item label="用户id">
{
getFieldDecorator("booksName", {
rules: [
{
required:true,
message:"不能为空"
}
]
})(
<Input />
)
}
</Form.Item>
<Form.Item label="用户名称">
{
getFieldDecorator("username", {
rules: [],
//与rules同级设置默认值
initialValue:aaa
})(
<Input />
)
}
</Form.Item>
<Form.Item label="用户信息">
{
getFieldDecorator("username", {
rules: [],
//与rules同级设置默认值
initialValue:bbb
})(
<Input />
)
}
</Form.Item>
<Form.Item label="用户状态">
{
getFieldDecorator("username", {
rules: [],
//与rules同级设置默认值
initialValue:ccc
})(
<Select>
<Option value="出勤">出勤</Option>
<Option value="请假">请假</Option>
<Option value="旷工">旷工</Option>
</Select>
)
}
</Form.Item>
<Form.Item label="用户时间">
{
getFieldDecorator("username", {
rules: []
})(
<Input />
)
}
</Form.Item>
</Form>
)
}
}
export default Form.create()(ModelForm)
antd - 表单校验组件demo
最新推荐文章于 2023-03-16 16:58:14 发布