乐趣区

antd多表单提交实例

场景: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 时,清空上一个站点的租户。

退出移动版