问题1:ag-grid的行编辑功能与final-form的表单验证冲突。
解决方法:
onCellEditingStarted(params) {
params.api.stopEditing(false);
params.api.startEditingCell({ rowIndex: params.rowIndex, colKey: params.column.colId });
// 禁用final-form的表单验证
params.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
}
onCellEditingStopped(params) {
params.api.stopEditing();
// 手动触发final-form的表单验证
params.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
params.api.gridOptionsWrapper.gridOptions.validate();
}
问题2:final-form的表单验证无法与ag-grid的行编辑功能协同工作。
解决方法:
import { useForm } from 'react-final-form';
const MyForm = () => {
const form = useForm();
const validate = (values) => {
const cellEditor = params.api.getCellEditorInstances()[0];
if (cellEditor && cellEditor.isCancelBeforeStart()) {
return '编辑器校验失败';
}
// 其他表单验证逻辑
// ...
};
return (
);
};
import { useForm } from 'react-final-form';
const MyCellEditor = (params) => {
const form = useForm();
const handleInputChange = (e) => {
const newValue = e.target.value;
form.change(params.column.colId, newValue);
};
return ;
};
通过以上的解决方法,可以解决ag-grid和final-form在行编辑和表单验证方面的冲突,并使它们能够协同工作。