根据另一个下拉选择的值反应选择链接的选项

Question

使用React Select Async是链接选项的最佳实践。

我的意思是：我有3个下拉菜单，默认情况下，第一个下拉菜单使用选项值填充，接下来的2个下拉菜单被禁用。

选择第一个下拉列表值应根据其值填充第二个下拉列表选项，以此类推，然后在下一个下拉列表中进行填充。

Answer 1

例如，我有react-select异步字段。我用于管理表格formik。首先，您创建字段：

<AsyncSelect
   name="first"
   ...
   onChange={(name, value) => {
     // you can write what you want but here small example what I do for other
     // two fields
     setFieldValue('second', null);
     setFieldValue('third', null);
     return setFieldValue(name, value);

   }}
/>

和second字段：

<AsyncSelect
   name="second"
   key={!!values.first && !!values.first.id ? values.first.id : null}
   ...
   onChange={(name, value) => {
     setFieldValue('third', null);
     return setFieldValue(name, value);
   }}
/>

我给key并在更改第一个字段时更改key值。因为如果不这样做，second字段将不知道first字段何时更改值。而且，如果您给uniq设置可变的key，则可以从取决于first字段的远程数据中加载。和third字段：

<AsyncSelect
   name="third"
   key={!!values.third && !!values.third.id ? values.third.id : null}
   ...
   onChange={setFieldValue}
/>

这是管理依赖的三个或更多字段的简便方法。我认为您了解这种逻辑。