React-admin表单问题：提交获取值及动态字段取值

问题根源 #

你混用了react-hook-form和React-admin自带的<Form>组件，两者的表单管理机制冲突——React-admin的<Form>内部已经集成了表单状态管理，手动引入的useForm无法正确注册React-admin的表单字段，导致提交时获取空对象。

解决方案 #

移除react-hook-form依赖，利用React-admin自身的表单能力实现需求，以下提供两种可行方案：

方案1：提交时手动过滤字段（简单直接）

直接通过React-admin<Form>的onSubmit回调获取完整表单值，再根据show状态过滤出需要的字段：

import { useState } from "react";
import { Button, Create, Form, TextInput } from "react-admin";

const CreateFormList = () => {
  const [show, setShow] = useState(false);
  const defaultValues = { author: "suresh", title: "you can" };

  const onSubmitHandler = (values) => {
    // 根据show状态过滤字段
    const filteredValues = show 
      ? { title: values.title, author: values.author } 
      : { title: values.title };
    console.log("filtered submit values", filteredValues);
    // 此处添加你的业务提交逻辑（如调用API）
  };

  return (
    <Create>
      <Form
        defaultValues={defaultValues}
        onSubmit={onSubmitHandler}
      >
        <TextInput source="title" />
        {show && <TextInput source="author" />}
        <Button onClick={() => setShow(!show)} label={show ? "隐藏作者字段" : "显示作者字段"} />
        <Button type="submit" label="submit" />
      </Form>
    </Create>
  );
};

export default CreateFormList;

方案2：动态注册/注销字段（精确控制表单状态）

通过React-admin的useFormContext钩子，在show状态变化时手动注册或注销字段，确保表单值仅包含当前显示的字段：

import { useState, useEffect } from "react";
import { Button, Create, Form, TextInput, useFormContext } from "react-admin";

const CreateFormList = () => {
  const [show, setShow] = useState(false);
  const defaultValues = { author: "suresh", title: "you can" };
  const { register, unregister } = useFormContext();

  // 监听show状态变化，动态注册/注销author字段
  useEffect(() => {
    if (show) {
      register("author");
    } else {
      unregister("author");
    }
  }, [show, register, unregister]);

  const onSubmitHandler = (values) => {
    console.log("submit values", values);
    // 此时values自动匹配当前显示的字段
  };

  return (
    <Create>
      <Form
        defaultValues={defaultValues}
        onSubmit={onSubmitHandler}
      >
        <TextInput source="title" />
        {show && <TextInput source="author" />}
        <Button onClick={() => setShow(!show)} label={show ? "隐藏作者字段" : "显示作者字段"} />
        <Button type="submit" label="submit" />
      </Form>
    </Create>
  );
};

export default CreateFormList;

说明 #

• React-admin的<Form>组件无需额外引入第三方表单库，直接通过onSubmit即可获取表单值。
• 方案1适合简单场景，通过提交时过滤快速实现需求；方案2适合需要严格控制表单字段状态的场景，确保表单值与页面显示完全同步。

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