Самая большая проблема, с которой я столкнулся при написании компонента React, связана с формой, которая на самом деле имеет вложенную и сложную схему JSON.
Мне было интересно, есть ли способ, с помощью которого мы можем достичь двусторонней привязки данных React State непосредственно с входом, который получает рендеринг с формой. Не волнуйтесь !! этот подход может спасти вашу задницу.
Подход
С помощью методов Lodash, SET и GET мы можем установить значение на любом уровне вложенного JSON.
_.set(object, 'a.b[0].c', 4); _.get(object, 'a.b[0].c');
Идея состоит в том, чтобы иметь единый onChange метод для всех ваших элементов формы, таких как поля ввода, текстовая область и т. Д.
Код
- Импорт, всего 2
2. Состояние с вложенным и сложным JSON
3. Метод OnChange с 5 строками
в свойстве name мы можем указать путь к json, чтобы позже мы могли получить значение и установить это значение на желаемый путь.
4. Метод рендеринга настолько прост, насколько это возможно
идея установить путь к атрибуту имени ввода и получить значение из этого пути, которое будет отображаться как значение ввода.
5. Все вместе
Такой подход избавил меня от множества проблем, связанных с двусторонней привязкой вложенного и сложного JSON.
Этот подход может показаться немного странным для приведенного выше примера, но когда у вас есть много полей ввода, с которыми нужно иметь дело, и если эти значения являются частью другой иерархии, этот подход может спасти положение.
СЧАСТЛИВОЕ КОДИРОВАНИЕ
