<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>
);
}