Как я писал ранее ... нет необходимости управлять состояниями вручную, Formik управляет этим для нас .
Версия с функциональными компонентами / перехватчиками - useFormikContext (и <Formi /> в качестве родительского / контекстного поставщика) требуется при использовании <Field/>. Вы можете использовать useFormik (и без родительского элемента) с обычными html входами.
Внешний компонент:
export default function App() {
const items = [
{ country: "USA", level: 1 },
{ country: "USA", level: 5 },
{ country: "Canada", level: 2 },
{ country: "Canada", level: 4 },
{ country: "Bangladesh", level: 2 },
{ country: "Bangladesh", level: 7 }
];
return (
<div className="App">
<h1>connected selects</h1>
<Formik
initialValues={{ country: "", level: "" }}
onSubmit={values => {
console.log("SUBMIT: ", values);
}}
>
<Form data={items} />
</Formik>
</div>
);
}
Ответственность за внешний компонент (родительский элемент <Formik />):
- инициализация
- главные обработчики (отправка)
- проверка
Ответственность за внутренний компонент:
- данные, переданные в качестве объекта ;
- локальная фильтрация данных (исключая ненужные пересчеты с перехватчиками);
- локальные обработчики для полевых зависимостей;
- визуальные условные изменения
внутренний компонент :
import React, { useState, useEffect } from "react";
import { Field, useFormikContext } from "formik";
import { Modal } from "react-bootstrap";
const AddNewForm = props => {
const items = props.data;
// derived data, calculated once, no updates
// assuming constant props - for changing useEffect, like in levelOptions
const [countryOptions] = useState(
Array.from(new Set(items.map(item => item.country)))
);
const [levelOptions, setLevelOptions] = useState([]);
const {
values,
handleChange,
setFieldValue,
handleSubmit,
isSubmitting,
isValid // will work with validation schema or validate fn defined
} = useFormikContext();
const myHandleChange = e => {
const selectedCountry = e.target.value;
debugger;
// explore _useFormikContext properties
// or FormikContext in react dev tools
console.log("myHandle selectedCountry", selectedCountry);
handleChange(e); // update country
// available levels for selected country
const levels = items.filter(item => item.country === selectedCountry);
if (levels.length > 0) {
// update level to first value
setFieldValue("level", levels[0].level);
console.log("myHandle level", levels[0].level);
}
};
// current values from Formik
const { country, level } = values;
// calculated ususally on every render
//
// const countryOptions = Array.from(new Set(items.map(item => item.country)));
// const levelOptions = items.filter(item => item.country === country);
//
// converted into hooks (useState and useEffect)
//
useEffect(() => {
// filtered array of objects, can be array of numbers
setLevelOptions(items.filter(item => item.country === country));
}, [items, country]); // recalculated on country [or items] change
return (
<div>
<form onSubmit={handleSubmit}>
<Field
name="country"
value={country}
as="select"
onChange={myHandleChange} // customized handler
>
{!country && (
<option key="empty" value="">
Select Country - disappearing empty option
</option>
)}
{countryOptions.map((country, index) => (
<option key={country} value={country}>
{country}
</option>
))}
</Field>
{country && (
<>
<Field
name="level"
as="select"
onChange={handleChange} // original handler
>
{levelOptions.map((item, index) => (
<option key={item.level} value={item.level}>
{item.level}
</option>
))}
</Field>
<Modal.Footer>
<button type="submit" disabled={!isValid && isSubmitting}>
Save
</button>
</Modal.Footer>
</>
)}
</form>
<>
<h1>values</h1>
{country && country}
<br />
{level && level}
</>
</div>
);
};
export default AddNewForm;
Работающий демо , исследуемый / отлаживаемый iframe здесь
Соответствует ли он всем функциональным требованиям? Счастливой Пасхи