一、使用getfielddecorator之前,必须先使用 form.create({ })(form) 将表单组件包裹起来
class controlform extends react.component {} // 导出时将组件 controlform 用 form.create()包裹起来 export default form.create()(controlform)
二、经过 form.create
包装的组件将会自带 this.props.form
属性,通过解构赋值将 form 解构出来
// 解构出 form const {form} = this.props
// 解构出 getfielddecorator const {getfielddecorator} = form
三、使用 getfielddecorator 方法
<form.item label={item.label}> { getfielddecorator(item.label, { // 默认值(初始值) initialvalue: 5, // 校验规则:最大长度、最小长度、校验文案、正则表达式校验、是否必选 rules: [ { min: 3, max: 5, message: '长度应在3~5个字符', }, { required: true, }, { pattern: '^[a-za-z]\w{5,17}$', message: '以字母开头,长度在6~18之间,只能包含字母、数字和下划线)', }, ], })(<input />)} </form.item>
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论