Блог

У меня есть два выбора в моей форме, один из которых предназначен для источника, а другой — для назначения. У меня есть два массива, один для источника со всеми источниками, а другой для адресатов, который представляет собой массив внутри массива, соответствующий соответствующим адресатам для данного источника. Я передаю эти массивы в поле options в react select. При изменении моего источника мне нужно изменить параметры в Select для назначения на соответствующий массив внутри назначения. И когда источник снова изменится, мне нужно, чтобы поле выбора для назначения было пустым. Однако, если при изменении источника уже выбрано место назначения, массив назначения внутри параметров выбора реакции изменяется, но текст, отображаемый в react-select, не изменяется. Любая помощь приветствуется. Спасибо

Ссылка на CodeSandbox: 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) amp;amp; null
            : ''
    }
    onChange={(option) => props.setFieldValue('destination', option.value)}
/>
                        
 

Потому что вы не обновляете значение destination поля, проверяя, props.values.destination есть "" оно или нет. Вот изменение, которое вы можете внести, чтобы заставить его работать:

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

Отредактированная ссылка на песочницу

Некоторые примечания:

• второе поле имеет два options реквизита
• используется === для сравнения значений (также второй выбор)

Было бы полезно предоставить Codesandbox для этой проблемы, но из вашего описания кажется, что вы хотели бы перемещать элементы из одного списка в другой, для этого в разных библиотеках есть несколько полезных компонентов, называемых Transfer / Transfer List:

• пример — материал-пользовательский интерфейс
• пример — дизайн ant

Если вы хотите сделать это с нуля — в документах Formic есть пример, как управлять зависимостью между полями