美文网首页
antd proform item 自定义组件

antd proform item 自定义组件

作者: 吴占超 | 来源:发表于2023-01-16 16:15 被阅读0次

被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。
你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

以上为官方文档描述,简单的 name、valuePropName 绑定子控件进行 form value设置。
有时候我们可能想要自定义进行值的转换。
需要用到

shouldUpdate

Form 通过增量更新方式,只更新被修改的字段相关组件以达到性能优化目的。大部分场景下,你只需要编写代码或者与 dependencies 属性配合校验即可。而在某些特定场景,例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 shouldUpdate 修改 Form.Item 的更新逻辑。

shouldUpdatetrue 时,Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助:

<Form.Item  shouldUpdate>

  {()  =>  {

  return  <pre>{JSON.stringify(form.getFieldsValue(),  null,  2)}</pre>;

  }}

</Form.Item>

你可以参考示例查看具体使用场景。

shouldUpdate 为方法时,表单的每次数值更新都会调用该方法,提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助:


<Form.Item  shouldUpdate={(prevValues, curValues)  => prevValues.additional  !== curValues.additional}>

  {()  =>  {

  return  (

  <Form.Item  name="other">

  <Input  />

  </Form.Item>

  );

  }}

</Form.Item>

你可以参考示例查看具体使用场景。

form 是哪里来的

通过fc渲染来获取进行shouldUpdate刷新渲染实现外部隔离

import { ProFormItem } from '@ant-design/pro-components';
import { Switch } from 'antd';

export type ProFormSwitchWzcPropType<T, F> = {
  valueEnum: {
    true: {
      label: string;
      value: T;
    };
    false: {
      label: string;
      value: T;
    };
  };
  /**
   * form item name
   */
  name: string;
  label: string;
};
const ProFormSwitchWzc = <T, F>(prop: ProFormSwitchWzcPropType<T, F>) => {
  return (
    <ProFormItem label={prop.label} shouldUpdate>
      {(form) => {
        return (
          <Switch
            checkedChildren={prop.valueEnum.true.label}
            unCheckedChildren={prop.valueEnum.false.label}
            checked={
              form.getFieldValue(prop.name) === prop.valueEnum.true.value
            }
            onChange={(ck) =>
              form?.setFieldValue(
                prop.name,
                prop.valueEnum[ck ? 'true' : 'false'].value,
              )
            }
          ></Switch>
        );
      }}
    </ProFormItem>
  );
};

export default ProFormSwitchWzc;

使用

<ProForm<AccountEditReq>
        onFinish={handleFinish}
        formRef={formRef}
        params={routerParams}
        formKey="accountItem"
        dateFormatter={(value, valueType) => {
          console.log('---->', value, valueType);
          return value.format('YYYY/MM/DD HH:mm');
        }}
        request={handlePageInit}
        autoFocusFirstInput
      >
        <ProFormSwitch
          name="adminFlag"
          label="超級管理員"
          checkedChildren="是"
          unCheckedChildren="否"
        />
        <ProFormSwitchWzcPropType<number, AccountEditReq>
          valueEnum={{
            true: {
              label: '正常',
              value: 0,
            },
            false: {
              label: '锁定',
              value: 1,
            },
          }}
          name="lockFlag"
          label="锁定账户"
        ></ProFormSwitchWzcPropType>
      </ProForm>

相关文章

网友评论

      本文标题:antd proform item 自定义组件

      本文链接:https://www.haomeiwen.com/subject/rvbzcdtx.html