antd组件3.0到4.0Form表单的使用（1）

大四毕业季，计算机相关的专业要开始做毕设了，有同学找我帮忙写个页面，作为一名在公司实习了好几个月的前端人士，我是一口答应下来，心想着这不小意思嘛！也就增删改查功能，但是事实狠狠的打了我的打脸~~~
原本我也没意识到antd版本之间的问题，但是在写页面的时候各种bug出现了，这就让人很纳闷了，原本几个小时能完成的东西，耗了我一整天，一直在疯狂百度中，话不多说，下面开始吧！！！

创建表单页面：
antd 3.0版本>>> class newForm extends Component{} export default Form.create()(newForm);
antd 4.0版本>>> class newForm extends Component{ formRef = React.createRef() render() { return (<Form ref={formRef}></Form>)}} export default newForm;
获取表单值：
antd 3.0版本>>> form.validateFields((err, fieldsValue) => {console.log(fieldsValue);})) `

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

antd 4.0版本>>> const [useform] = Form.useForm(); useform.getFieldsValue(['username']) `

				<Form.Item
					name="username"
					rules= {[{ required: true, message: 'Please input your 
                        username!' }]}
				>  
                        <Input
                            placeholder="Username"
                        />
                </Form.Item>`

antd 4.0版本在初用的时候内心是十分唾弃的，但是用完以后表示真香，在Form表单这块，4.0版本去除了Form.create()方法，采用Form.useForm()来替代，在导出form表单组件的时候简化了代码，与其他普通组件导出保持一致，无需再单独记忆。Form.Item书写时也直接多了，不再需要使用getFieldDecorator来书写，极大了简化了代码。