reactjs - 显示不是 直接子项的输入的选项卡表单验证

Question

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

当我使用子组件时会发生此问题。如果所有组件都在创建/编辑级别定义，则选项卡会按预期变为红色。但如果有嵌套组件，则选项卡没有。

有没有一种方法可以将验证“传递”到我的自定义组件或将我的自定义字段标记为无效，以便在选项卡具有无效字段时将其正确标记为红色？

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

• 此代码有效。

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 会将其选项卡标记为无效。当输入字段包裹在另一个组件中时，这将停止工作。

查看此源代码链接以获取更多信息: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>

...