显示不是 <FormTab> 的直接子项的输入的选项卡表单验证答案

【问题标题】：Show Tab Form Validation For Inputs Not Direct Children Of <FormTab>显示不是 <FormTab> 的直接子项的输入的选项卡表单验证
【发布时间】：2019-09-27 13:06:55
【问题描述】：

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

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

有没有办法将验证传递给我的自定义组件或将我的自定义字段标记为无效，因此当它们有无效字段时，选项卡在红色时被正确标记为红色？

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

此代码有效。

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) 而不破坏对我的项目的许多依赖项。

【问题讨论】：

标签： reactjs validation tabs react-admin

【解决方案1】：

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

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

为了克服这个问题，我想出了这个“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>

...

【讨论】：