具体的情况是这样。
项目里有这么一个页面,存在两级的 Tab 页,其中第一级的 Tab 数量在进入页面时固定,第二级由用户控制添加,然后每个 Tab 页下是一个独立的表单页。最后用户输入完成过后,提交一整个 JSON 到接口。最后的 JSON 大概长这样:
{
"name": "xxx",
"tab1": [
{
"foo": 111,
"bar": 222
},
{
"foo": 111,
"bar": 222
}
],
"tab2": [
{
"fff": 333,
"vvv": 444
},
{
"fff": 555,
"vvv": 666
}
]
}
我的做法是在最外层定义了一个 Context ,同时每一种 Tab 各自准备了一个 From 组件。然后绑定 From 的 onValuesChange 事件,一旦触发就用 values 的值更新 Context 。如果用户切换 Tab 的话还是原来的组件,但是从 Context 取值然后再用 setFieldsValue 给 From 赋值,这样用户看上去就是切换页面了。本身页面还涉及到多处跨 Tab 的联动(比如在 tab2 下面修改了第一个子 tab 的 fff 字段的值,tab1 下面的 foo 字段会相应变动),差不多用这种方式也能解决数据联动的问题。
大部分逻辑算是走通了,但是还是遇到了两个问题。使用 onValuesChange 相当于脱离了 From 的控制,导致正常表单的数据校验没法触发。因为页面上不存在一个单页面提交按钮,所以也不知道什么时机来用代码触发校验;二是同页面联动数据的值是通过 setFieldValue 来做的,但是没想到的是 setFieldValue 不会触发 onValuesChange 事件,导致我不能把更新的值更新到 Context 上,除非用户再正常触发一次 onValuesChange ,但这样做显然不可能。
很头痛,是不是最初的设计就哪里有点问题?感觉有些不知所措了