React-select with formik：更改传递给 select 的选项

Question

我的表单中有两个 select，其中一个用于起点，另一个用于目的地。我有两个数组，一个用于所有起点的原点，另一个用于目的地，这是一个数组内的数组，与给定起点的相关目的地相匹配。我将这些数组传递给 react select 中的选项字段。当我的原点改变时，我需要将 Select 中的选项更改为目的地内的相关数组。当原点再次改变时，我需要将目标的 select 设为空。但是，如果当我更改原点时已经有目的地 selected，则 react select 选项中的目标数组会更改，但 react-select 中显示的文本不会更改。任何帮助表示赞赏。谢谢

代码沙盒Link：https://codesandbox.io/s/hopeful-tdd-8huwo?file=/src/App.js

<Select
    options={origins}
    placeholder="Origin"
    value={origins ? origins.find((option) => option.value === props.values.origin) : ''}
    onChange={(option) => {
        props.setFieldValue('origin', option.value);
        props.setFieldValue('destination', '');
    }}
/>
<Select
    options={
        props.values.origin == ''
            ? []
            : destinations[origins.findIndex((entry) => props.values.origin == entry.value)]
    }
    options={destinations}
    placeholder="To"
    value={
        destinations
            ? destinations.find((option) => option.value === props.values.destination) && null
            : ''
    }
    onChange={(option) => props.setFieldValue('destination', option.value)}
/>

Answer 1

一些注意事项：

第二个字段有两个 options 道具
使用 === 比较值（也是第二个 select）

为这个问题提供一个 Codesandbox 会很有帮助，但从你的描述来看，你似乎想将项目从一个列表移动到另一个列表，为此，在不同的库中有一些不错的组件，称为 Transfer/Transfer List:

如果您想从头开始执行此操作 - an example on the Formic docs，如何管理字段之间的依赖关系

Answer 2

因为您没有通过检查 props.values.destination 是否为 "" 来更新 destination 字段的值。以下是您可以进行的更改以使其正常工作：

value={
          destinations && props.values.destination
            ? destinations.find(
                (option) => option.value === props.values.destination
              ) && null
            : ""
        }

已编辑沙盒 Link

React-select with formik：更改传递给 select 的选项

React-select with formik: changing options passed to select

javascript

reactjs

react-select

formik