能否为react-admin创建的表单使用Formik验证？

当然可以在react-admin创建的表单中使用Formik进行验证，下面是两种实用的实现方式，同时也会补充一些注意事项：

方式一：完全自定义Formik表单 #

跳过react-admin自带的<SimpleForm>或<TabbedForm>，直接用Formik构建表单，同时复用react-admin的输入组件（如<TextInput>、<SelectInput>），这些组件支持value、onChange等属性，可以和Formik的状态无缝对接。

示例代码：

import { Create, TextInput, SelectInput, SaveButton } from 'react-admin';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';

// 定义Formik验证规则
const validationSchema = Yup.object().shape({
  title: Yup.string().required('标题不能为空'),
  category: Yup.string().required('请选择分类'),
});

const CustomPostCreate = () => {
  return (
    <Create>
      <Formik
        initialValues={{ title: '', category: '' }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting }) => {
          // 调用react-admin的dataProvider完成数据提交
          const { dataProvider } = useDataProvider();
          dataProvider.create('posts', { data: values })
            .then(() => setSubmitting(false))
            .catch(error => {
              setSubmitting(false);
              console.error('提交失败:', error);
            });
        }}
      >
        {({ values, handleChange, errors, touched, isSubmitting }) => (
          <Form>
            <TextInput
              source="title"
              value={values.title}
              onChange={handleChange}
              error={touched.title && errors.title}
              helperText={touched.title && errors.title}
            />
            <SelectInput
              source="category"
              choices={[
                { id: 'tech', name: '科技' },
                { id: 'life', name: '生活' },
              ]}
              value={values.category}
              onChange={handleChange}
              error={touched.category && errors.category}
              helperText={touched.category && errors.category}
            />
            <SaveButton 
              type="submit" 
              disabled={isSubmitting}
            />
          </Form>
        )}
      </Formik>
    </Create>
  );
};

export default CustomPostCreate;

方式二：扩展React-Admin表单组件（进阶） #

如果你想保留react-admin表单的原有功能（如自动加载编辑页面的初始数据、和dataProvider的自动交互），可以通过高阶组件或自定义表单组件，将Formik的验证逻辑注入到react-admin的表单系统中。

核心思路是：

• 自定义一个继承自react-admin <Form>组件的容器
• 在容器内部初始化Formik实例，同步react-admin的表单状态和Formik状态
• 为内部输入组件传递Formik的验证错误信息

这种方式需要对react-admin的表单生命周期有一定了解，适合需要深度定制的场景。

额外提醒 #

React-Admin本身集成了基于react-hook-form的表单验证系统，如果你不是特别依赖Formik的特定特性（如熟悉的API、第三方插件生态），可以优先尝试官方的验证方案，更贴合框架生态：

import { SimpleForm, TextInput, Create } from 'react-admin';

// 自定义验证函数
const validatePost = (values) => {
  const errors = {};
  if (!values.title) errors.title = '标题不能为空';
  if (!values.body) errors.body = '内容不能为空';
  return errors;
};

const PostCreate = () => (
  <Create>
    <SimpleForm validate={validatePost}>
      <TextInput source="title" />
      <TextInput source="body" multiline />
    </SimpleForm>
  </Create>
);

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