当包含在Tab组件中时，Redux-form Field Array未按预期工作

Question

我想创建一个类似于本例中提供的redux形式 https://redux-form.com/7.3.0/examples/fieldarrays/使用Field Array。

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

我面临的问题是：

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

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

Answer 1

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

library(zoo)

as.Date(as.yearmon(today) + 1/12)
## [1] "2009-05-01"

as.Date(as.yearmon(today) + 1/12, frac = 1)
## [1] "2009-05-31"

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

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

希望有帮助！