显示非直接 Children 的 <FormTab> 输入的选项卡表单验证

Question

当未获得焦点的选项卡出现验证错误时，选项卡 header 应显示为红色。取而代之的是，当未聚焦的选项卡出现验证错误时，选项卡 header 不会给出任何错误指示。

当我使用子组件时会出现此问题。如果所有组件都在 Create/Edit 级别定义，则选项卡会按预期变为红色。但是如果有嵌套的组件，则选项卡没有。

有什么方法可以 "pass" 验证我的自定义组件或将我的自定义字段标记为无效，以便在选项卡具有无效字段时将其正确标记为红色？

例如，在我的代码中，我使用自定义输入作为子组件。输入在无效时变为红色，而选项卡则不会。

此代码有效。

export const ProductCreate = (props) => (
  <Create {...props}>
    <TabbedForm>
      <FormTab label="settings">
        <Field component={TextInput} name="name" label="Name" validate={required} {...props} />
        <SettingsTab />
      </FormTab>
      <FormTab label="sizes">
        <SizesTab />
      </FormTab>
    </TabbedForm>
   </Create>
);

通过将字段移动到子组件中，验证指示器不起作用。

export const ProductCreate = (props) => (
  <Create {...props}>
    <TabbedForm>
      <FormTab label="settings">
        <SettingsTab />
      </FormTab>
      <FormTab label="sizes">
        <SizesTab />
      </FormTab>
    </TabbedForm>
  </Create>
);


export const SettingsTab = (props) => (
  <div>
    <Field component={TextInput} name="name" label="Name" validate={required} {...props} />
  </div>
);

我被这个问题困住了，我无法更改我当前的 react-admin 版本 (react-admin@^2.9.3) 而不破坏我的项目的许多依赖关系。

Answer 1

最近遇到了和OP一样的问题

查看源码发现在react-admin中FormTab组件希望直接包含input字段。每当某些选项卡具有验证失败的字段时，TabbedForm 会将其选项卡标记为无效。当输入字段包裹在另一个组件中时，这将停止工作。

查看此 link 到源代码以获取更多信息：https://github.com/marmelab/react-admin/blob/872480a9a4a8491066eb8b1f0f651e48f47e9080/packages/ra-ui-materialui/src/form/TabbedForm.tsx#L347

为了克服这个问题，我提出了这个“hacky”解决方案：

// A component that does nothing and accepts any properties
const Dummy = (props: any) => (<></>);

...

<FormTab label="My tab" path="my-tab">
    <MyCustomComponentThatContainsInputFields {...props} />

    {/* As many Dummy components as MyCustomComponentThatContainsInputFields contains inputs.
They just indicate that this FormTab contains particular input fields */}
    <Dummy source="input_1" />
    <Dummy source="input_2" />
    ...
</FormTab>

...

显示非直接 Children 的 <FormTab> 输入的选项卡表单验证

Show Tab Form Validation For Inputs Not Direct Children Of <FormTab>

validation

tabs

reactjs

react-admin