登陆注册表单制作时,除了可以引入UI样式,Ant Design 也提供了JS属性对象。
// 获取 getFieldDecorator JS属性对象,这个值的作用是帮助我们做表单封装
const { getFieldDecorator } = this.props.form;
<From>
<FormItem>
//JS属性对象书写时需要用 { } 包裹起来,不能直接写在代码块中
{
getFieldDecorator('userName',{
initialValue:'Jack',
rules:[]
})(
<Input placeholder='请输入用户名'/>
)
}
</FormItem>
</From>
getFieldDecorator是一个方法,这个方法接收两个参数,第一个是表单的字段对象,第二个是验证规则。这个方法本身返回一个方法,需要将需要获取值的标签包裹进去
如果此时报错:
TypeError: Cannot read property 'getFieldDecorator' of undefined
就证明没有导出,需要在页面最后面加上下面这句代码:
export default Form.create()(FormLogin)
这句话非常重要,表明我们是通过 Form.create()方法创建了具备getFieldDecorator功能的这个表单FormLogin,这样才能通过this.props.form调用。
同时将最上方的 export default class FormLogin extends React.Component{ }
中的 export default 去掉,只保留下方的即可.