antd 表单项联动验证时，disabled属性不生效

在antd表单中，表单项验证条件是根据其他表单项的值决定的，比如当前【时间限制】选择【无】时，【限制时段】表单项不可用

所以我单纯使用

disabled={sourceForm.getFieldValue().timeLimit}

是不生效的，因为disabled切换会涉及到state渲染，而直接使用 【获取表单字段属性】有可能是上一次的状态 ，导致渲染失败

解决办法：

1.在表单项改变的时候 ，单独使用一个【state状态】改变来驱动页面更新，使表单联动

 const [timeLimitVal, setTimeLimitVal] = useState(true);

 <Form.Item
              bordered={true}
              label="时间限制"
              name="timeLimit"
              rules={[{ required: true, message: '请输入时间限制' }]}
              className={styles.detail}
            >
              <Radio.Group
                onChange={(e) => {
                  sourceForm.validateFields(['periodDate']);
                  sourceForm.validateFields(['rangeTime']);
                  setTimeLimitVal(e.target.value === 1); 
                }}
              >
                <Radio value={1}>有（时间限制满足时才能进行方案推荐）</Radio>
                <Radio value={0}>无</Radio>
              </Radio.Group>
            </Form.Item>

使用的时候，直接使用state状态值即可

 <Radio.Group
                onChange={(e) => {
                  let val = e.target.value;
                  if (val === 1 || val === 2) {
                    setSelectTime([]);
                  }
                }}
                disabled={!timeLimitVal}
              >
   <Radio value={1}>每天</Radio>
   <Radio value={2}>法定工作日</Radio>
 </Radio.Group>

但是这种方法有点麻烦，感觉还是有点太笨了哈哈
然后我们使用antd 官网文档中的方法shouldUpdate

2.<Form.Item shouldUpdate>

当 shouldUpdate 为 true 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 shouldUpdate 不会起作用

然后我们按照示例写，直接将shouldUpdate放在Form.Item上，发现我的子组件就算是用return返回也全部消失了



然后又试用了一下官网的另一个示例，就是把带name的formItem和带shouleUpdate的formItem分开，使用嵌套写，发现这次成功了！

上一下关键代码吧

  <Form.Item shouldUpdate>
              {({ getFieldValue }) => {
                const timeLimitVal = getFieldValue('timeLimit');
                return (
                  <Form.Item
                    bordered={true}
                    label="限制时段：时间"
                    name="rangeTime"
                    className={`${styles.detailItem} ${styles.detail}`}
                    id={styles.detail}
                  >
                    <div>222</div>
                  </Form.Item>
                )
              }}
            </Form.Item>