React-admin中TabbedForm如何在指定标签页条件性移除提交工具栏？

我来分享几个在React-admin的TabbedForm里实现这两个需求的实用方案，都是项目里亲测有效的：

一、条件性显示FormTab的工具栏（含提交按钮） #

React-admin的FormTab支持通过toolbar prop自定义每个标签页的工具栏，你可以结合表单数据或当前标签页状态来控制它的显示/隐藏：

1. 针对单个标签页的条件工具栏 #

比如只有当表单数据处于「草稿」状态时，才显示某个标签页的工具栏：

import { Toolbar, SaveButton, useFormContext } from 'react-admin';

// 自定义标签页工具栏组件
const DraftOnlyToolbar = () => {
  const { record } = useFormContext();
  
  // 根据表单数据判断是否显示工具栏
  if (!record || record.status !== 'draft') return null;

  return (
    <Toolbar>
      <SaveButton />
    </Toolbar>
  );
};

// 在TabbedForm中使用
<TabbedForm>
  <FormTab label="基本信息" toolbar={<DraftOnlyToolbar />}>
    {/* 你的字段组件，比如TextInput、NumberInput等 */}
  </FormTab>
  <FormTab label="历史记录">
    {/* 这个标签页默认不显示工具栏 */}
  </FormTab>
</TabbedForm>

2. 全局工具栏的条件显示（根据当前标签页） #

如果你想控制整个TabbedForm的全局工具栏，只在特定标签页显示，可以结合useTabbedFormContext获取当前激活的标签：

import { TabbedForm, FormTab, Toolbar, SaveButton, useTabbedFormContext } from 'react-admin';

const ConditionalGlobalToolbar = () => {
  const { currentTab } = useTabbedFormContext();
  
  // 只有在「基本信息」标签页时显示工具栏
  if (currentTab !== 'basic') return null;

  return (
    <Toolbar>
      <SaveButton />
    </Toolbar>
  );
};

<TabbedForm toolbar={<ConditionalGlobalToolbar />}>
  <FormTab label="基本信息" name="basic">
    {/* 字段组件 */}
  </FormTab>
  <FormTab label="高级设置" name="advanced">
    {/* 字段组件 */}
  </FormTab>
</TabbedForm>

二、在特定标签页中条件性移除提交按钮 #

这个需求分两种场景，你可以根据实际情况选择：

1. 全局工具栏中，特定标签页隐藏提交按钮 #

保持全局工具栏存在，但切换到指定标签页时隐藏保存按钮：

import { TabbedForm, FormTab, Toolbar, SaveButton, useTabbedFormContext } from 'react-admin';

const GlobalToolbarWithConditionalSave = () => {
  const { currentTab } = useTabbedFormContext();

  return (
    <Toolbar>
      {/* 当不在「只读信息」标签页时，显示保存按钮 */}
      {currentTab !== 'readonly' && <SaveButton />}
      {/* 可以保留其他按钮，比如取消按钮 */}
    </Toolbar>
  );
};

<TabbedForm toolbar={<GlobalToolbarWithConditionalSave />}>
  <FormTab label="可编辑内容" name="editable">
    {/* 可编辑字段 */}
  </FormTab>
  <FormTab label="只读信息" name="readonly">
    {/* 只读字段，比如TextField */}
  </FormTab>
</TabbedForm>

2. 特定标签页的工具栏完全移除提交按钮 #

给目标标签页单独配置一个不含保存按钮的工具栏：

import { Toolbar, DeleteButton } from 'react-admin';

// 自定义不含保存按钮的工具栏
const NoSaveToolbar = () => (
  <Toolbar>
    {/* 只保留删除按钮，或者其他你需要的操作 */}
    <DeleteButton />
  </Toolbar>
);

<TabbedForm>
  <FormTab label="基本信息">
    {/* 使用全局工具栏的保存按钮 */}
  </FormTab>
  <FormTab label="删除操作" toolbar={<NoSaveToolbar />}>
    {/* 这个标签页的工具栏没有保存按钮 */}
  </FormTab>
</TabbedForm>

进阶：结合表单数据的复杂条件判断 #

如果需要更精细的控制（比如根据表单字段值隐藏按钮），可以同时结合useFormContext和useTabbedFormContext：

import { useFormContext, useTabbedFormContext, Toolbar, SaveButton } from 'react-admin';

const ComplexConditionalToolbar = () => {
  const { record } = useFormContext();
  const { currentTab } = useTabbedFormContext();

  // 当在「高级设置」标签页且数据已锁定时，隐藏保存按钮
  if (currentTab === 'advanced' && record?.isLocked) {
    return <Toolbar />; // 空工具栏，或只显示其他按钮
  }

  return (
    <Toolbar>
      <SaveButton />
    </Toolbar>
  );
};

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