React Admin 4.2.4自定义保存按钮实现服务端校验字段标红

这个需求完全可以实现，核心是利用React Admin底层依赖的react-hook-form表单状态管理能力，手动将API返回的错误绑定到对应字段上，就能触发和原生校验一致的标红效果。具体实现步骤如下：

1. 获取表单上下文实例
   在SaveButton所在的组件中，通过useFormContext钩子拿到react-hook-form的表单实例，该实例包含设置字段错误的方法。

2. 修改错误回调逻辑
   在mutationOptions的onError回调里，解析API返回的错误字段，调用表单实例的setError方法，将错误信息绑定到对应的表单字段上。

以下是修改后的完整代码示例：

import { useFormContext } from 'react-hook-form';
import { SaveButton, SaveIcon, notify, redirect, refresh } from 'react-admin';

// 假设这是你的Create/Edit组件内部代码
const BookForm = () => {
    const { form } = useFormContext();

    return (
        <>
            {/* ...此处省略其他表单输入字段 */}
            <SaveButton
                variant="contained"
                id="createSave"
                alwaysEnable
                submitOnEnter={true}
                icon={<SaveIcon style={{ height: '20px', width: '20px' }} />}
                mutationOptions={{
                    onSuccess: (response) => {
                        refresh();
                        redirect('show', 'books', response.id);
                    },
                    onError: (error) => {
                        const fieldErrors = error.body.errors;
                        if (!fieldErrors) return;

                        // 遍历错误字段，绑定到表单状态
                        Object.entries(fieldErrors).forEach(([fieldName, errorMsg]) => {
                            form.setError(fieldName, { message: errorMsg }, { shouldFocus: true });
                        });

                        // 全局提示错误信息
                        notify(Object.values(fieldErrors).join(' '), { type: "error" });
                    }
                }}
                type="button"
            />
        </>
    );
};

关键说明： #

• form.setError是react-hook-form的核心方法：第一个参数是表单字段名（必须和输入组件的source属性完全匹配），第二个参数是包含message的错误对象，第三个参数可选，用于设置是否自动聚焦到错误字段。
• 需确保API返回的错误是键值对结构（比如error.body.errors中的键对应表单字段的source值），如果你的API错误结构不同，只需调整fieldErrors的解析路径即可。
• useFormContext必须在React Admin的Form组件（或Create/Edit组件内部，因为它们默认包含Form容器）范围内使用，否则无法获取到表单实例。

内容的提问来源于stack exchange，提问作者Mike