ReactJS - получение данных из глубоко вложенных форм (или возможная перезапись)
Постановка задачи:
Мне нужно получить входные данные всех полей в любом Container Component или Form Component.
Детали:
Существует от 4 до 5 различных компонентов формы, каждый из которых использует некоторые общие поля в разделе. Они извлекаются в различные компоненты и импортируются в компоненты формы верхнего уровня для повторного использования. Эти извлеченные компоненты имеют несколько полей ввода (от 7 до 10 полей каждое). Вот как выглядит структура моих компонентов:
- Container Component
-- Form Component A (Contains the submission click handler)
--- InputFieldTypeA Component
--- InputFieldTypeB Component
--- ...
-- Form Component B (Contains the submission click handler)
--- InputFieldTypeA Component
--- InputFieldTypeB Component
--- ...
-- Form Component C (Contains the submission click handler)
--- InputFieldTypeA Component
--- InputFieldTypeB Component
--- ...
Я пробовал эту ссылку, но, поскольку у меня слишком много полей ввода, нет смысла иметь так много обработчиков обратных вызовов (которые потребуются в компонентах FormA, FormB и C). Другое решение заключалось в использованииref приведено в той же ссылке, но я где-то читал, что это неправильное использование refsи поэтому я отказался от этой идеи. состояние не может использоваться ни в одном из этихchild components(InputFieldTypeA, InputFieldTypeB] и т. Д., Потому что нам нужно поднять состояние до компонента контейнера.
Какое решение / стратегия лучше в этой ситуации? Как правильно обращаться с такими глубоко вложенными компонентами?