Коллеги, подскажите пожалуйста.
Есть форма на которой очень много инпутов, чтобы не раздувать файлик до несколько экранов разделил по компонентам, чекбокс отдельно, инпут отдельно и т.д. Потом из них на главной странице собрал всю форму. Получается следующее
class Submit extends Component {
onSubmitHandler = () => {
//здесь нужно собрать все данные, которые
//ввёл пользователь в кастомных компонентах
}
return (
<div>
<TextInput .../>
<TextInput .../>
<CheckboxCustom .../>
<CheckBoxCustom .../>
<ListCategories/>
...(еще с десяток контролов)...
<Button onClick={this.onSubmitHandler}>Submit</Button>
</div>
)
}
Кастомные контролы имеют свои состояния где и хранят уже введённое пользователем значение.
Когда нажимаем на submit кнопку, в методе onSubmitHandler нужно собрать все данные из кастомных контролов. И тут есть проблема, я не понимаю как правильно это сделать. Первая мысль, которая пришла - это в каждый контрол передать колбэк, внутри контрола вызывать этот колбэк с обновлённым значением, т.е. таким образом передать значение выше. Т.е. выглядит так
class Submit extends Component {
categoryId = null;
onSubmitHandler = () => {
//this.categoryId - содержит последнее введённой значение
}
handleInput = (key, value) => {
this[key] = value;
}
return (
<div>
<ListCategories onSelectedCategory={this.handleInput} .../>
...
</div>
)
}
Внутри ListCategories уже делаем вызов this.onSelectedCategory('categoryId', 3);
Такой подход работает, но мне кажется, это неправильно. И не могу найти решение по лучше.
Можно было бы все стейты из кастомных компонентов вытащить наружу в класс Submit, но хотелось сделать, чтобы каждый компонент был изолированным со своим состоянием которое присуще только ему.
Есть у кого какие идеи как это решить? Может нужно перестроить компоненты, но как без понятия.
