React Admin：TabbedForm创建按钮状态变更时如何保留dropDownSelectTree选中项

• 绑定表单状态
  确保DropDownSelectTree通过source属性正确关联表单字段，让React Admin的form state统一管理选中值。如果是自定义封装的组件，要手动同步表单状态：

  import { useFormContext } from 'react-hook-form';
  
  const MySelectTree = () => {
    const { form } = useFormContext();
    return (
      <DropDownSelectTree
        source="targetField"
        value={form.getValues('targetField')}
        onChange={(value) => form.change('targetField', value)}
      />
    );
  };
  

• 避免不必要重渲染
  给DropDownSelectTree添加稳定的key属性，防止父组件重渲染时重置组件内部状态。如果是自定义组件，用React.memo包裹做性能优化：

  const MemoizedSelectTree = React.memo(DropDownSelectTree);
  
  // 在TabbedForm中使用
  <MemoizedSelectTree source="targetField" key="select-tree" />
  

• 排查验证逻辑
  按钮从禁用变可用是因为表单验证通过，检查自定义验证规则是否误修改了选中字段的值。验证函数仅返回错误信息即可，不要操作表单状态：

  // 错误示例：不要在验证里修改form值
  const validateCategory = (value, allValues) => {
    // 错误操作：allValues.category = undefined;
    return value ? undefined : '请选择分类';
  };
  

• Tab切换状态保留
  如果组件在Tab页面内，确认Tab组件不会在切换时卸载内容。部分自定义Tab组件需要设置keepMounted属性，确保组件实例被保留，状态不丢失。

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