在使用Ant Design Form组件时,我们可能会遇到Form.getFieldsError方法总是返回空的错误的情况。这是因为getFieldsError方法只能在表单的onFieldsChange回调函数中被正确地调用。因此,我们需要确保在表单的onFieldsChange回调函数中正确地调用getFieldsError方法。
以下是一个示例代码,展示了如何正确地使用onFieldsChange和getFieldsError方法:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
const [form] = Form.useForm();
const [isError, setIsError] = useState(false);
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const onFieldsChange = (changedFields, allFields) => {
console.log('onFieldsChange', changedFields, allFields);
const errors = form.getFieldsError();
setIsError(errors.some((error) => error));
};
return (
);
};
export default MyForm;
在上面的示例代码中,我们使用了useState hook来保存当前表单是否出现错误的状态。然后,我们定义了一个onFieldsChange回调函数,并在函数中调用getFields