菜鸟使用ProForm踩坑记录

如有不对的地方欢迎指正!

1.提交的时候 获取不到checkbox的值 解决: valuePropName='checked'

 <ProForm.Group>
        <ProFormCheckbox valuePropName='checked' width="md"  name="checkbox1" >哈哈</ProFormCheckbox>
      </ProForm.Group>

2.关于ref:ModalForm使用form    ProForm使用formRef

 1. const [formObj] = ProForm.useForm();
 <ModalForm form={formObj} >
<ProFormText width="sm" name="plan_no" label="计划序号" disabled/>
 </ModalForm>

2.const App = () => {
  // 绑定一个 ProFormInstance 实例
  const formRef = useRef<
    ProFormInstance<{
      date: string;
    }>
  >();

  return (
    <ProForm
      onValuesChange={async () => {
        formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
          // 以下为格式化之后的表单值
          console.log(val.date);
        });
      }}
      // 通过formRef进行绑定
      formRef={formRef}
    ></ProForm>

3.表单项的枚举值字段不规则如何处理-使用fieldNames,处理成我们需要的label和value格式

   <ProFormSelect
                  name="secondPartnerCode"
                  label="二级合作方"
                  rules={[{ required: true, message: "必填" }]}
                  fieldProps={{
                    options:SalesChannelOrg,
                    fieldNames: {
                      label: "labelValue",
                      value: "resCode",
                    },
                  }}
                />

4.不使用状态来控制表单联动

 使用shouldUpdate属性来控制更新(像极了react的useEffect)

JSX中使用回调  解构出getFieldValue方法来获取父项的值变化   用于控制当前子表单的展示

  <ProForm.Item
              noStyle
              shouldUpdate={(pre, cur) => (pre.channelCategoryCode !== cur.channelCategoryCode)|| (pre.secondPartner1?.value !== cur.secondPartner1?.value) }
            >
              {({getFieldValue})=>{
                return (getFieldValue('channelCategoryCode')==='A'&&getFieldValue('secondPartner1')?.value===20100001)? <ProFormSelect
                  label="协议"
                  options={agreementChannelCodeEnum}
                  colProps={{ xl: 8, md: 12 }}
                  name="agreementChannelCode"
                  rules={[{ required: true }]}
                />:null
            }}
              
                 </ProForm.Item>