Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2020, 06:06
Новичок на форуме
Отправить личное сообщение для seregzhka Посмотреть профиль Найти все сообщения от seregzhka
 
Регистрация: 02.10.2020
Сообщений: 1

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, но хотелось сделать, чтобы каждый компонент был изолированным со своим состоянием которое присуще только ему.

Есть у кого какие идеи как это решить? Может нужно перестроить компоненты, но как без понятия.
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2020, 12:48
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

https://redux.js.org/tutorials/essen...he-posts-slice
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как взять значение value из формы? Sergius182 Events/DOM/Window 5 30.11.2018 10:09
Взять первое значение у ряда чисел. Мих026 Элементы интерфейса 2 14.09.2016 21:22
Проблемы с выпадающим списком JavaScript ursus102 Общие вопросы Javascript 0 16.01.2016 19:30
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 08:42
Взять значение группы переменных Alive Substance Общие вопросы Javascript 2 22.06.2010 17:20