React 专项测试选择组件 - 每行显示 6 个复选框

import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport ContentCard from '@/components/ContentCard';\nimport './index.less';\nimport FixedWidthProForm from '@/components/FixedWidthProForm';\nimport { ProFormInstance } from '@ant-design/pro-form';\nimport { Checkbox } from 'antd';\nimport type { CheckboxValueType } from 'antd/es/checkbox/Group';\n\nexport type ApplicationFormRef = {\n getApplicationFormValue?: () => any;\n validateApplicationForm: () => Promise | undefined;\n};\ninterface Props {\n ref?: ForwardedRef;\n}\n\nconst sepcialData = [\n {\n label: '讯飞语音测试',\n value: '1',\n },\n {\n label: '安全专项测试',\n value: '2',\n },\n {\n label: '蓝牙功能测试',\n value: '3',\n },\n {\n label: 'WIFI功能测试',\n value: '4',\n },\n {\n label: '性能测试',\n value: '5',\n },\n {\n label: 'HDMI兼容性测试',\n value: '6',\n },\n {\n label: 'Google ART测试',\n value: '7',\n },\n {\n label: 'GDPR专项测试',\n value: '8',\n },\n {\n label: '蓝牙性能测试',\n value: '9',\n },\n {\n label: 'WIFI性能测试',\n value: '10',\n },\n {\n label: '流畅度测试',\n value: '11',\n },\n {\n label: 'USB兼容性测试',\n value: '12',\n },\n {\n label: 'Amazon ART测试',\n value: '13',\n },\n {\n label: 'CAPP专项测试',\n value: '14',\n },\n {\n label: '蓝牙兼容性测试',\n value: '15',\n },\n {\n label: 'WIFI兼容性测试',\n value: '16',\n },\n];\n\nconst SpecialTest: React.FC = forwardRef((props, ref) => {\n const formRef = useRef(null);\n const [checkValue, setCheckValue] = useState([]);\n useImperativeHandle(ref, () => ({\n validateApplicationForm: () => formRef.current?.validateFieldsReturnFormatValue?.(),\n }));\n\n const onChange = (checkedValues: CheckboxValueType[]) => {\n console.log(checkedValues, 92);\n setCheckValue(checkedValues);\n };\n\n return (\n \n \n

\n \n \n );\n});\n\nexport default SpecialTest;\n\n/* CSS 代码 */\n.table-container {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-gap: 8px;\n}\n.table-cell {\n padding: 8px;\n box-sizing: border-box;\n}