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

Question

我正在将react-select与react-final-form一起使用，我需要两个选择，其中第一个选择中的所选选项会动态设置第二个选择的选项。例如，在第一个选择中选择选项One时，第二个选择将获得选项One A和One B。

这些选择用于数组中。这是我的代码框，初始设置为https://codesandbox.io/s/react-final-form-field-arrays-e4mm6?fontsize=14。

我已经找到了两个类似的示例，但是我不知道如何使它们适应我的用例。

首先，我发现react-final-form的{​​{3}}使用createDecorator设置字段的值，但是它用于字段的值，而不是选项prop。

第二，我发现react-select的{​​{3}}使用状态来动态设置选项，但考虑到字段数组，我不知道如何适应情况。

我将不胜感激。

Answer 1

有趣，问题。你去。我创建了一个<PickOptions/>组件，该组件监视第一个字段，并为第二个字段提供选项。当第一个字段的值更改时，它也会清除第二个字段，这看起来像您想要的。您也可以将其设置为数组中的第一个选项或其他内容。