带有 react-select 和 react-final-form 字段数组的条件下拉菜单

Conditional dropdowns with react-select and react-final-form field arrays

我将 react-selectreact-final-form 一起使用,我需要两个 select,其中第一个 select 中的 selected 选项动态设置第二个 select 的选项。 For example, when option One is selected in the first select, the second select gets options One A and One B.

这些select在数组中使用。这是我的带有初始设置的 codesandbox https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14.

我找到了两个类似的例子,但我不知道如何使它们适应我的用例。

首先,我发现 this example for react-final-form 使用 createDecorator 设置字段的值,但它用于字段的值而不是选项属性。

其次,我发现 this example for react-select 可以使用状态动态设置选项,但考虑到字段数组,我不知道如何使其适应我的情况。

如有任何帮助,我将不胜感激。

有趣的问题。给你。我创建了一个 <PickOptions/> 组件来监视第一个字段并为第二个字段提供选项。当第一个字段的值发生变化时,它还会清除第二个字段,这似乎是您想要的。您也可以将其设置为数组中的第一个选项或其他内容...