React: Взять значение из child контрола
Коллеги, подскажите пожалуйста.
Есть форма на которой очень много инпутов, чтобы не раздувать файлик до несколько экранов разделил по компонентам, чекбокс отдельно, инпут отдельно и т.д. Потом из них на главной странице собрал всю форму. Получается следующее 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, но хотелось сделать, чтобы каждый компонент был изолированным со своим состоянием которое присуще только ему. Есть у кого какие идеи как это решить? Может нужно перестроить компоненты, но как без понятия. |
|
Часовой пояс GMT +3, время: 04:09. |