大四毕业季,计算机相关的专业要开始做毕设了,有同学找我帮忙写个页面,作为一名在公司实习了好几个月的前端人士,我是一口答应下来,心想着这不小意思嘛!也就增删改查功能,但是事实狠狠的打了我的打脸~~~
原本我也没意识到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来书写,极大了简化了代码。