React

Ant Design JS属性对象getFieldDecorat

2018-09-04  本文已影响31人  楠楠_c811

登陆注册表单制作时,除了可以引入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  去掉,只保留下方的即可.
上一篇 下一篇

猜你喜欢

热点阅读