React 专项测试选择组件 - 使用 Ant Design ProForm 和 Checkbox 实现

import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'; import ContentCard from '@/components/ContentCard'; import './index.less'; import FixedWidthProForm from '@/components/FixedWidthProForm'; import { ProFormInstance } from '@ant-design/pro-form'; import { Checkbox } from 'antd'; import type { CheckboxValueType } from 'antd/es/checkbox/Group';

export type ApplicationFormRef = { getApplicationFormValue?: () => any; validateApplicationForm: () => Promise | undefined; }; interface Props { ref?: ForwardedRef; }

const sepcialData = [ { label: '讯飞语音测试', value: '1', }, { label: '安全专项测试', value: '2', }, { label: '蓝牙功能测试', value: '3', }, { label: 'WIFI功能测试', value: '4', }, { label: '性能测试', value: '5', }, { label: 'HDMI兼容性测试', value: '6', }, { label: 'Google ART测试', value: '7', }, { label: 'GDPR专项测试', value: '8', }, { label: '蓝牙性能测试', value: '9', }, { label: 'WIFI性能测试', value: '10', }, { label: '流畅度测试', value: '11', }, { label: 'USB兼容性测试', value: '12', }, { label: 'Amazon ART测试', value: '13', }, { label: 'CAPP专项测试', value: '14', }, { label: '蓝牙兼容性测试', value: '15', }, { label: 'WIFI兼容性测试', value: '16', }, ];

const SpecialTest: React.FC = forwardRef((props, ref) => { const formRef = useRef(null); const [checkValue, setCheckValue] = useState([]); useImperativeHandle(ref, () => ({ validateApplicationForm: () => formRef.current?.validateFieldsReturnFormatValue?.(), }));

const onChange = (checkedValues: CheckboxValueType[]) => { console.log(checkedValues, 92); setCheckValue(checkedValues); };

return (

export default SpecialTest;

1. 给包裹复选框选项的父容器（即<div className='table-container'>）添加以下CSS样式：

.table-container {
  display: flex;
  flex-wrap: wrap;
}

这样设置后，父容器的子元素会自动换行。

2. 给每个复选框选项的容器（即<div className='table-cell'>）添加以下CSS样式：

.table-cell {
  flex: 0 0 16.666%;
  padding: 8px;
  box-sizing: border-box;
}
```这样不能实现。内容：如果以上的CSS样式无法实现一行显示6个复选框选项并多的往下显示，可以尝试修改以下两点：

1. 修改父容器的CSS样式，设置`flex-direction: column;`，让子元素垂直排列：
```css
.table-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

2. 修改每个复选框选项的容器的CSS样式，设置宽度为16.666%，并添加margin-bottom属性来控制选项之间的间距：

.table-cell {
  width: 16.666%;
  padding: 8px;
  box-sizing: border-box;
  margin-bottom: 8px; /* 调整间距 */
}

这样修改后，就能实现一行显示6个复选框选项，并且多出的选项会自动换行显示。