Почему при добавлении Input теряются введенные данные в других Inputs?

Question

[Амир]

Добрый день, уважаемые.
Возник вопрос. Чтобы кусками код не вставлять, вставлю песочный-проект, чтобы Вы смогли его увидеть полностью и протестировать. Вот он
Ситуация следующая: выбираем в Select "One", в появившихся инпутах пишем что-либо, после нажимаем на Add, и всё, что мы вписали, исчезает. Что я делаю не так? Мучаюсь уже несколько дней.
Заранее благодарен за ответы.

Comments

[Максим]

Амир а хотите чтобы значения оставались в инпутах?

[Амир]

Максим: добрый день. Спасибо за ответ. Мне необходимо, чтобы я мог в любое время добавить еще инпутов (при нажатии на кнопку Add), но чтобы информация уже введенная в другие инпуты не терялась. То есть, в первый инпут, допустим, я ввел что-либо, после этого нажал Add, а в первом инпуте так же осталась информация, которую я ввёл. Сейчас же при нажатии на Add вся введенная информация исчезает из других инпутов.

Answer 1

[Максим]

Ситуация следующая:
По кнопке add вызывается функция addPropertiesToArray, вы внутри в newArrays имеете: {Registrations:2} и это устанавливаете в state.

После изменения state, само собой вызывается метод render, внутри которого у вас вызывается функция propertiesParser

Это функция идет по properties и отрисовывает заметку. У вас в этот момент нет никакой информации, что было введено в inputs, вы это никуда не сохранили, а ре-рендер вызвали (так как state изменили в addPropertiesToArray), следовательно ваши MyInput компоненты отрисовались с пустым значением (вы, в разметке так и указываете value='' => то есть value = пустая строка).

Чтобы у вас сохранялись введенные значения, вам нужно их где-то хранить. В вашем случае, я бы хранил их в state, и в input'ax брал бы эти значения. Само собой, в функции addPropertiesToArray, эти бы значения в стейт и добавлял.

p.s. сам код в рамках этого вопроса не обсуждаем, я вашей задумки не понял, мне кажется слишком сложно написано.

Comments

[Амир]

я вашей задумки не понял

Ну тут задумка, действительно, довольно сложная и непонятная, но попытаюсь объяснить, если Вам будет интересно. В начале кода есть переменная prop в которой содержится объект. По идее, я описал частный случай, так как будет приходить входной объект для отрисовки формы, так сказать, динамической вложенности). Поэтому и нужна функция propertiesParser. Так вот в случае, если в этом объекте приходит объект с Type: "Array" то мне необходимо всё, что лежит в Item.Properties размножить сколько угодно раз (от 1).
В данном примере есть Api Identifier и Permissions. Их в выходном объекте может быть бесконечное множество. Поэтому я и добавил кнопку Add (хотя по задаче мне необходимо добавлять новый блок при начале написания в предыдущем блоке, но с этим я справлюсь, когда получу рабочую версию с кнопкой Add).
Надеюсь, понятно объяснил.
А по поводу Вашего ответа - да, я предполагал, что мне придется хранить все введенные данные в state, просто когда я делал песочницу для простого динамического добавления inputs, то всё работало, и данные никуда не девались. Поэтому я подумал, что можно и без хранения получить то, что я хочу.
Спасибо.

[Максим]

Амир: наверняка, в той другой вашей песочнице, инпуты рисовались несколько иначе, так как значения там могли бы оставаться если бы они не "перерисовывались".