摘要：支持表单双向绑定，开发过程中无需通过回调函数去获取组件的值，通过可以自动完成数据绑定的功能。如果我们通过获取了数据之后，表单数据不会发生变化。注意使用这个函数必须用封装需要绑定的字段。
antd支持表单双向绑定，开发过程中无需通过onChange()回调函数去获取组件的值，通过 getFieldDecorator() 可以自动完成数据绑定的功能。
{
getFieldDecorator("email", {})()
}
第二个参数是options，不同的配置可以完成更多的任务，例如必填数据验证
{
let opt = { rules: [ { required: true, message: "the field must supply." } ] }
getFieldDecorator("email", opt)()
}
也可以完成更多业务逻辑数据验证，例如：
{
let opt = { rules: [ { type: "email", message: "It"s invalid email address." } ] }
getFieldDecorator("email", opt)()
}
还可以指定一个初始值：
{
let opt = { initialValue: "hello@mail.com" }
getFieldDecorator("email", opt)()
}
注意：通过initialValue指定的初始值，只在第一次render()中起作用。如果我们通过API获取了数据之后，表单数据不会发生变化。
这个时候就要用到mapPropsToFields()来为字段绑定数据。
{
function mapModelToProps(model) {
return {
item: model.requirement.item,
loading: model.loading.effects["requirement/fetch"]
};
}
function mapPropsToFields(props) {
return {
description: Form.createFormField({
value: props.item.description
})
}
}
export default connect(mapModelToProps)(Form.create({mapPropsToFields})(Edit));
}
这里有两个函数来map所需要的数据：
mapModelToProps()将state中所需要的数据映射到props上。
mapPropsToFields()则将props中的数据映射到表单字段上，并更新字段的value值。注意使用这个函数必须用Form.createFormField()封装需要绑定的字段。
Ant design使用的表单组件是rc-form
使用的验证组件是async-validator
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95254.html
摘要：擅长网站建设微信公众号开发微信小程序开发小游戏制作企业微信制作建设，专注于前端框架服务端渲染技术交互设计图像绘制数据分析等研究。 Ant Design of React @3.10.9 拉取项目 luwei.web.study-ant-design-pro, 切换至 query 分支，可看到 Form 表单实现效果 实现一个查询表单 showImg(https://segmentfau...
摘要：网上已经有一篇类似的文章富文本编辑器的使用当然我也参考了他的写法然后实现了我到需求现在拿出来分享分享版本我们用编辑器大部分情况是在表单中使用而的表单系统一般也离不了安装很简单注意全是小写和绑定一些属性设置这段代码会划红线理由是没有返回值本人 网上已经有一篇类似的文章wangEditor富文本编辑器+react+antd的使用, 当然我也参考了他的写法, 然后实现了我到需求, 现在拿出来...
摘要：在使用的过程中，可以发现它提供了一系列基于的开发部署方式，如下图。我们可以通过分别启动单个镜像，并把镜像绑定到本地对应端口的形式进行部署，达到容器可通信的目的。但是为了更方便的管理多容器的情况，官方提供了的方式。 背景 Ant Design Pro是一个企业级中后台解决方案，在Ant Design组件库的基础上，提炼出典型模板/业务组件/通用页等，在此基础上能够使开发者快速的完成中后台...
摘要：背景目前是社区最炙手可热的新技术，我们准备追一下热度，在当前的项目中实践一下技术。我们的项目使用的脚手架是，初步想法是把现有的一个有状态页面组件重构成函数组件。存放表单值的状态是声明在列表组件，传给表单组件。 背景 React Hooks目前是React社区最炙手可热的新技术，我们准备追一下热度，在当前的项目中实践一下Hooks技术。 我们的项目使用的脚手架是Ant Design P...
摘要：安装项目依赖包根据自身习惯的方式，自行选择使用或进行安装依赖包。安装完成会显示部分警报，暂时忽略。如果安装最后显示错误，请自行搜索查询错误信息。 安装项目依赖包 根据自身习惯的方式，自行选择使用 npm 或 yarn 进行安装依赖包。 注意：如果选择 npm 安装，后面的命令都是用 npm 命令，包括 npm start / npm build 等；选择 yarn 安装同样如此。请勿将...
阅读 1854·2021-11-15 11:46
阅读 1051·2021-10-26 09:49
阅读 1795·2021-10-14 09:42
阅读 3353·2021-09-26 09:55
阅读 810·2019-08-30 13:58
阅读 993·2019-08-29 16:40
阅读 3431·2019-08-26 10:27
阅读 583·2019-08-23 18:18
