时间戳

首页 > 解决方案 > 包装在 Tab 组件中时，Redux-form 字段数组无法按预期工作

javascript - 包装在 Tab 组件中时，Redux-form 字段数组无法按预期工作

问题描述

我想使用字段数组创建一个类似于此示例
https://redux-form.com/7.3.0/examples/fieldarrays/中提供的 redux 表单。

但我希望每个成员都显示在单独的选项卡中。我为此使用了 material-ui Tab 组件。请参考此沙箱https://codesandbox.io/s/jjy10p86n9（这只是我尝试的一个示例，但最终我希望单击添加成员按钮应在应用栏中添加一个带有新成员字段的新选项卡）

我面临的问题是：

  1. 当我单击提交按钮时，仅验证当前选项卡中的字段。其他选项卡中的字段未经过验证。
  2. 当我在选项卡之间切换时，选项卡中的先前验证被删除。
  3. 如果我们多次访问选项卡并点击提交按钮，则不会显示验证错误。

有没有人有任何想法或建议我该如何实施？

标签： javascriptreactjsredux-form

解决方案

您需要使用 CSS 来隐藏/显示与选项卡按钮关联的选项卡内容，而不是在单击选项卡按钮时呈现选项卡内容。因此，您获得的代码示例使用以下代码呈现所选选项卡的内容：

    {fields.map(
        (member, index) =>
          tabValue === index && (
            <div key={index}>
    ...

您想创建一个设置了“display:none”的 css 类，并将该类应用于与您当前内容无关的内容。例如：

   <div className={tabValue === index ? null: "hiddenClass"}>
    {fields.map(
        (member, index) =>
          (
            <div key={index}>
    ...
    </div>

希望有帮助！

推荐阅读