Пишу форму регистрации, в которой, среди прочих, есть следующие секции:
- Образование
- Язык
- Опыт работы
В каждой секции есть соответствующие поля для заполнения, и каждая оканчивается кнопкой-компонентом React, которую я и не могу понять, как реализовать. Вот что она, по задумке, умеет:
- У неё есть value='+', меняется по клику на '-' и обратно
- Кликнута, когда value="+": она отрисовывает после текущего дива/элемента, в котором находится, ещё один точно такой же (например, если находится в секции "Язык", то отрисовывает ещё одну такую же секцию, чтобы юзер мог указать данные о своём втором языке)
- Кликнута, когда value="-": удаляет этот элемент. Не с конца, а именно тот, который отрисовала эта данная кнопка.
Не возникает вопросов: как по клику менять value и запускаемую функцию; и даже вполне понятно, что в state должны быть массивы для каждого типа секции, которые содержат соответствующие элементы, и в которые их можно добавлять по клику той кнопки, например:
this.state = {
educations:[education],
languages:[language, language, language],
experiences:[exp]
}
и потом рендерить каждый массив при помощи map.
Что мне не понятно:
Что из всего этого (секция, кнопка, вся форма регистрации) должно быть компонентом-классом, компонентом-функцией, элементом-константой?
Если кнопка - компонент, как она будет менять state формы, добавляя элементы в массивы? Вроде бы в React так делать нельзя. Если компонент - фор
Как кнопка будет понимать, в какой секции она находится, чтобы добавить именно такую же?
Как удалять из массива именно тот элемент, возле которого был кликнут '-'?