react表单中参数联动和动态校验

一、联动

方式一

<Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.IPOnly !== currentValues.IPOnly
          }
        >
           {({ getFieldValue }) =>
            getFieldValue("IPOnly") ? (
              1
            ) : 2
          }
 </Form.Item>

方式二

 <Form.Item dependencies={['assetType']} noStyle>
          {() => (
            <span>
              {form.getFieldValue('assetType')  ? (
                <Form.Item
                  label='数据库'
                  name='database'
                >
                  <Input placeholder='数据库' />
                </Form.Item>
              ) : null}
            </span>
          )}
  </Form.Item>

二、校验

用hidden属性来实现,相当于vue中的v-show,此方法不会过滤掉参数;用三元运算符则会直接过滤掉参数和校验规则


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容