antd 自定义表单

Q_004

已于 2024-08-20 20:55:29 修改

阅读量111

点赞数 1

文章标签： react.js

于 2024-08-20 20:34:29 首次发布

本文链接：https://blog.csdn.net/q_004/article/details/141367873

版权

 <ProForm.Item
              label=""
              labelCol={{ span: colSpan }}
              name={saftyCheckItem.dataKey}
              style={{ marginBottom: 0 }}
            >
              <ItemRadioAndCheckBox
                disabled={!!checkMod?.readOnly}
                dataOption={dataOption}
                saftyCheckItem={saftyCheckItem}
                // checkValue={checkValue}
              />
            </ProForm.Item>

自定义表单 <ItemRadioAndCheckBox>

接收父级传递的value onChange

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

export function ItemRadioAndCheckBox({
  saftyCheckItem,
  dataOption,

  value,
  onChange,
  disabled,
}: FormBlockProps) {
  return (
    <div className="border border-color-layout-bg-border">
      <div className="bg-color-bg-layout h-8 pl-4 flex items-center">
        <div className="w-2 h-2 mr-1.5 rounded-full bg-color-primary"></div>
        {saftyCheckItem.name}
      </div>
      <div className="bg-white pt-3 pl-4 flex flex-wrap">
        {dataOption?.map((dataItem) => {
          let isActive = false;
          if (saftyCheckItem.enum_DataType == 4) {
            isActive = value === dataItem.value;
          } else if (saftyCheckItem.enum_DataType == 6) {
            if (
              Array.isArray(value) &&
              value?.some((element: number) => element == dataItem.value)
            ) {
              isActive = true;
            }
          }
          return (
            <div
              key={dataItem.value}
              className={cn(
                ItemClassName,
                isActive
                  ? 'bg-color-primary  text-white'
                  : 'bg-color-bg-layout  text-color-text-secondary',
                disabled && 'cursor-not-allowed opacity-70 hover:init',
              )}
              onClick={() => {
                if (!disabled) {
                  if (saftyCheckItem.enum_DataType == 4) {
                    //单选
                    onChange?.(value !== dataItem.value ? dataItem.value : undefined);
                  } else if (saftyCheckItem.enum_DataType == 6) {
                    //多选
                    let arr = value ? value : [];
                    if (arr && Array.isArray(arr)) {
                      if (arr.some((ele) => ele == dataItem.value)) {
                        arr = arr.filter((ele) => ele != dataItem.value);
                      } else {
                        arr.push(dataItem.value);
                      }
                    }
                    onChange?.(arr && Array.isArray(arr) ? [...arr] : []);
                  }
                }
              }}
            >
              {dataItem.label}
            </div>
          );
        })}
      </div>
    </div>
  );
}