antd多表单提交实例

miqt 发布于2019-08-23 18:28 / 1864人阅读

摘要：场景下有三个，每个下是一个表单，点击不同下的提交按钮只能验证当前提交其值，进行相关操作问题判断校验结果就是对整个页面的进行判断，并不能够对单个校验结果做判断。

场景： Tabs下有三个TabPane，每个TabPane下是一个form表单，点击不同form下的提交按钮只能验证当前form.item,提交其value值，进行相关操作

问题： this.props.form.validateFieldsAndScroll()判断校验结果就是对整个页面的Form进行判断，并不能够对单个Form校验结果做判断。

解决：把表单作为一个组件独立出去，页面通过props传入表单组件需要的值，在表单组件内部多带带维护相关逻辑。（相当于子向父传值）

代码：
（1）父组件：state = {MesVal: "",PushVal: "",EmailVal: "",};用于承接各组件value以便操作。
setMessageVal,setPushVal,setEmailVal 三个方法用来传递单个子页面中form的value值。

（2）子组件：以其中一个为例

注： getFieldDecorator 用于和表单进行双向绑定，可以理解为监控各个item的值的变化；

  (PushForm = Form.create()(PushForm))   创建form实例，这一步很重要，不可省略！

点击提交：重要代码

      const {setPushVal} = this.props
      setPushVal(values)

到此传值结束。

插一个类似省级联动的例子：
假设有这样俩个数组：要求根据站点的不同，对应选择该站点下的租户；
state = {site: [],tntInst: []};

注：使用setFieldValue（设置一组输入控件的值）,可以在切换站点select时，清空上一个站点的租户。

云服务器 GPU云服务器提交表单表单提交表单数据提交提交整个表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105292.html

JSON生成Form表单（三）

摘要：嵌套组件配置如果表单组件里还含有其他表单组件，这时直接通过组件配置去渲染无疑能节约不少的工作量。请输入方法传入组件配置的列表就能渲染出表单组件来，需要注意的是，子表单组件的一定是基于父表单组件的。表单的实例方法请看下节的生成表单四 container表单组件在实际的项目中，JSON表单提供的表单组件是远远不够的，而且提供表单组件是一件低效的事，目前Ant Design组件库提供的表单...

Half 2019-08-23 13:39 评论0 收藏0
JSON生成Form表单

摘要：是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为。所以数组元素如果为的话，其内容就是的。到目前为止，表单适合大部分的表单应用场景。 JSON表单描述 JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。JSON表单的优点是：可以快速构建出一个表单表单的数据、逻辑、视图分...

bingchen 2019-08-26 13:22 评论0 收藏0
Formik与antd-mobile的移动端的表单实践（下）

摘要：会在用户每次按下提交时进行一次完整校验或更改时进行一次单表单项的验证。传入为表单值与外部自定义传入的返回值为一个对象的表单提交处理而表单提交的处理，和我们做表单验证类似，只需要参考官方示例我们就可以简单的实现表单提交功能。大家好，工作闲暇之余又来续写一下Formik这个库的文章了，这次文章主要内容为如下：更多表单组件的封装示例单选/多选按钮选择器时间选择器文本输入框 ...

sihai 2019-08-23 12:09 评论0 收藏0
react+antd系列之Form表单(1)：添加与删除

摘要：在用的时候，我们如果要对表单进行添加和删除该怎么弄呢，如下表单提交添加删除名称名称不能为空请输入名称删除提交增加这里不仅能对表单进行增加和删除，还能对表单进行验证，看是否有输入，以上是本身没有数据的情况，如果是有数据的情况如下表单提交添加删在用antd的时候，我们如果要对表单进行添加和删除该怎么弄呢，如下： import { connect } from dva; import { ...

Donald 2019-08-23 14:08 评论0 收藏0
antd 和 element上传文件详解与FormData详解

摘要：当用户完成选择文件动作时，提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象，异步的实现是通过一个对象，一般简称该对象对。这些回答基于自己理解，如有不妥，希望路过的大神轻喷，指正。背景平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。我们分别来看一下element 和 antd 手动上传怎么处理：...

Fundebug 2019-08-23 10:29 评论0 收藏0