React AG 网格 - 如果选择行，则验证自定义单元格

Question

我有一个 3 列的网格。每行包含一个带有复选框的单元格和两个自定义单元格组件（默认为空）。每当单击自定义单元格时，都会打开一个模态框，允许用户：

• 从单选按钮中选择一个值
• 从输入字段插入一个值 如果选择一行，则该行的自定义单元格是强制性的，因此不应为空才能继续（然后将显示“提交”按钮）。

我尝试使用 cellClass 但它没有按预期工作。另外，当用户单击复选框时，我也想在另一个单元格上应用验证和类。

验证所选行的自定义单元格不为空并向其应用类的最佳方法是什么？

这是我的网格的代码：

const Grid = () => {
  const [rowData] = useState<IRow[]>([
    {
      boolean: false,
      car_brand: '',
      car_name: '',
    },
    {
      boolean: false,
      car_brand: '',
      car_name: '',
    },
    {
      boolean: false,
      car_brand: '',
      car_name: '',
    },
  ]);

  const [columnDefs] = useState<ColDef[]>([
    {
      field: 'boolean',
      headerName: '',
      editable: true,
    },
    {
      field: 'car_brand',
      headerName: 'Car Brand',
      cellRenderer: SelectCarBrand,
      cellClass: (params) => {
        if (params.data.boolean && params.data.car_brand === '') {
          return 'cell-fail';
        }
      },
    },
    {
      field: 'car_name',
      headerName: 'Car Name',
      cellRenderer: EnterCarName,
      cellClass: (params) => {
        if (params.data.boolean && params.data.car_name === '') {
          return 'cell-fail';
        }
      },
    },
  ]);

  return (
    <div>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} />
    </div>
  );
};

export default Grid;

这是一个自定义组件的代码：

const SelectCarBrand = (params: CustomCellRendererProps) => {
    const { isOpen, onOpen, onClose } = useDisclosure();

    const [radioValue, setRadioValue] = useState<string>();


    const handleOnChange = (value: string) => {
        setRadioValue(value);
        params.setValue(value);
    };

    const handleConfirm = () => {
     if (radioValue === undefined || radioValue === '') {
        params.setValue('');
    } else {
        params.setValue(radioValue);
    }
     onClose();
    };

    const handleOnClose = () => {
    if (radioValue === undefined || radioValue === '') {
        params.setValue('');
    }
    onClose();
    };

    return (
    <Box>
        <HStack onClick={onOpen} cursor="pointer">
        {!radioValue && (
            <Text>
            Select Car Brand
            </Text>
        )}
        {radioValue && <Text>{radioValue}</Text>}
        </HStack>

        <Modal isOpen={isOpen} onClose={handleOnClose}>
        <ModalOverlay />
        <ModalContent>
            <ModalHeader>
            Select Car Brand
            </ModalHeader>
            <ModalCloseButton />
            <ModalBody>
            <RadioGroup onChange={(e) => handleOnChange(e)}>
                <Stack>
                <Radio value="Tesla">
                    <Text>Tesla</Text>
                </Radio>
                <Radio value="Ferrari">
                    <Text>Ferrari</Text>
                </Radio>
                <Radio value="Lamborgini">
                    <Text>Lamborgini</Text>
                </Radio>
                </Stack>
            </RadioGroup>
            </ModalBody>

            <ModalFooter>
            <Button onClick={handleOnConfirm}>
                Confirm
            </Button>
            </ModalFooter>
        </ModalContent>
        </Modal>
    </Box>
    );
};
  
export default SelectCarBrand;

Answer 1

尝试使用 cellClassRules 代替

columnDefs: [
{
    field: 'car_brand',
    cellClassRules: {
        'pass': params => params.value !== '',
        'fail': params => params.value === '',
    }
 }],

pass 和 fail 是你的 CSS 类。