react学习(60)--ant design中getFieldDecorator

<From><FormItem>//JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中  {getFieldDecorator('userName',{initialValue:'Jack',rules:[{required:true,message:'用户名不能为空'},{min:5,max:10,message:'长度不在范围内'},{pattern:new RegExp('^\\w+$','g'),message:'用户名必须为字母或者数字'}]})(<Input placeholder='请输入用户名'/>)}</FormItem>
</From>

第一个参数是用户自定义的、用于识别该控件的变量名，这样便于在获取或设置该控件的值。
2019.3.12补充：值得注意的是，getFieldDecorator是一个非常智能的方法，它可以获得自定义组件的value值，在提交表单时会很方便。其次，initialValue的值会覆盖子组件中的placeHolder，如果子组件是下拉框，也会根据initialValue的值来匹配自己的value，并显示相应的值，可以说非常智能了。

react学习(60)--ant design中getFieldDecorator相关推荐

React工作60:ant design中getFieldDecorator
<From> <FormItem> //JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 { getFieldD ...
react学习(66)--ant design中Model宽度
react学习(65)--ant design加载中
import { Spin } from 'antd';ReactDOM.render(<Spin />, mountNode);
react学习(17)----ant design格式化日期
<Row gutter={12}><Col span={12}><Form.Item label="活动结束时间">{getFieldDecor ...
react学习(68)--ant design inputNumber
<InputNumber min={0} style={{ width: 100 }} onPressEnter={this.handleSearch} />
Ant Design中Form组件重置验证条件resetFields()方法
Ant Design中Form组件重置验证条件resetFields()方法需求, 实际完成时间(与任务生成日期联动,若任务生成日期选上,实际完成时间禁选) 却发现在验证完之后填写实际完成时间后任务 ...
Ant Design 中覆盖组件样式
使用场景: 比如ant design中的抽屉Drawer这个组件,由于组件库中的样式是给了padding为25px,但是我当前的需求是不需要padding,那么就需要写样式覆盖掉之前组件定义的样式. ...
ant Design 中使用 :globa
ant Design 中使用 :global 问题描述接触 antd 项目,发现样式里面有 :global 写法,研究一下问题结果 :global 其实是 css module 的一种写法,被其包 ...
React如何使用 Ant Design(简单使用)
在这里介绍一下,这个Ant Design组件库是与我们的 element 组件是一样的,使用方法大致相似. antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发 ...

react学习(60)--ant design中getFieldDecorator

react学习(60)--ant design中getFieldDecorator相关推荐

最新文章

热门文章