Повторно заполнить раскрывающийся список Выбрать в зависимости от другого выбора в форме Formik

У меня есть два раскрывающихся списка, где выбор параметра справа должен обновить параметры слева. введите описание изображения здесь

Первый - frequencyDays, второй - frequencyInterval.

Предположим, у меня есть функция, которая вернет массив <option>s для данного идентификатора (значение 2-го параметра)

const getOptionsDays = (value) => {
    let options = [];
    //... some logic in a loop ...
    for (var i = 0; i < N; i++) {
       options.push(<option key={i} value={i}>{i}</option>);
    }
    return options; // Returns an array of <option> elements
}

Форма Formik автоматически заполняется при инициализации, но не обновляется.

Первое раскрывающееся меню (периодичность, дни)

<Form.Control as="select"
  id="dropdownFrequencyDays"
  name="frequencyDays"
  value={values.frequencyDays}
  onChange={handleChange}
>
    <option></option>
    { getOptionsForDays(values.frequencyInterval) }
</Form>

Второе раскрывающееся меню (frequencyInterval), onChange должно вызвать повторное заселение

<Form.Control as="select"  
              id="dropdownFrequencyInterval"
              name="frequencyInterval"
              value={values.frequencyInterval}
              onChange={e => /* Should do something here but getting syntax errors */
                         // Call built-in Formik handleChange 
                         handleChange(e);
                         // Additional: call to repopulate 1st dropdown?
                         // ...errors
                       }
>

Я хочу, чтобы Formik выполнял привязку формы, но, кроме того, вызывал повторное заполнение 1-го раскрывающегося списка, но получал ошибки.


reactjs formik react-bootstrap
person gene b.    schedule 17.05.2021    source источник
comment
См. - stackoverflow.com/questions/60517777/   -  person Sean W    schedule 17.05.2021

Ответы (1)


arrow_upward
0
arrow_downward

Я был близко. Решение состоит в том, чтобы сохранить состояние var. с вашим массивом <option>. Затем onChange, помните, что синтаксис - onChange={e => { .. }} (двойная скобка), включает как Formik по умолчанию handleChange + настраиваемый установщик состояния.

// State var to keep option array
const [frequencyDayValues, setFrequencyDayValues] = useState([]);

...

// On initialization, set your option array (with whatever logic needed, 
// e.g. populateOptions() for an initial code of 55)
useEffect(() => {    
    setFrequencyDayValues(populateOptions(55));
}, []);

// The option array must contain actual <option> elements, e.g.
const populateOptions = (value) => {
    let options = [];
    options.push(<option value={..}>Label</option>);
    return options;
}
...

{/* Dependent Dropdown: Displays whatever is currently in frequencyDayValues */}
<Form.Control as="select"
              name="frequencyDays"
              value={values.frequencyDays}
              onChange={handleChange}
>
    <option></option>
    {/* Populate Frequency Days from current state variable */}
    {frequencyDayValues}
</Form.Control>

{/* Triggering Dropdown: onChange does both the Formik handleChange AND custom update */}
<Form.Control as="select" 
              name="frequencyInterval"
              value={values.frequencyInterval}
              onChange={e => {
                  // Call default Formik handleChange()
                  handleChange(e);
                  // Additionally set the new frequencyDayValues state variable
                  // based on e.target.value
                  setFrequencyDayValues(populateOptions(e.target.value));
                }
              }                                                      
>
person gene b.    schedule 18.05.2021