Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 07.11.2017
Сообщений: 121

Redux создание элемента по клику на кнопке

18.06.2019, 16:46. Показов 2038. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Нужно сделать так, чтобы при клике на кнопку New создавалось самым верхним новое пустое поле для заполнения, а после внесения всех данных, при нажатии на Add, эти данные должны уже "закрепиться" в состоянии и компонент должен быть как и остальные. Была мысль отправить объект вместе с экшном с пустыми значениями свойств, чтобы этот пустой объект отрисовался и... ерунда какая-то. В общем, как сделать такое?
Миниатюры
Redux создание элемента по клику на кнопке  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
18.06.2019, 16:46
Ответы с готовыми решениями:

Появление элемента по клику на кнопку и скрытие элемента по клику на любое место body
Задача стоит такая. Нужно сделать так, чтобы по клику на button class="helper" наш div id = "helper_list" появлялся на экране(по...

Создание и удаление обёртки элемента по клику или при потере фокуса
Здравствуйте, коллеги! Хотелось бы, чтобы кто-нибудь показал и объяснил, как можно создать обёртку элемента по клику на нём и её удаление...

Redux+React. Взаимодействие redux store с сервером
Помогите понять такой момент: Приложение react+redux+ сервер на ноде. Пока не использовал сервер работа redux store была более-менее...

3
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
19.06.2019, 01:38
Вариантов много, приведу один из них:
0) допустим ваш стор выглядит так:
JavaScript
1
2
draftItem: {} // объект с временным, не  "закрепленным" элементом, который создан кнопкой New 
items: [] // массив "закрепленных" элементов
данные в таблице выводятся так:
JavaScript
1
2
3
4
<Table>
{draftItem && <Tr item={draftItem}/>} //сначала выводим ряд с временным айтемом, если он есть. Возможно стоит добавить пропсу с типом айтема (драфт или обычный) для стилизации
{items.map((item) => <Tr item={item}/>)} // потом выводятся все остальные айтемы
</Table>
1) при клике на New создаём драфт айтем, все изменения вносим в него же
2) при клике на Add записываем драфт айтем в items и очищаем draftItem в сторе

Всё
0
0 / 0 / 0
Регистрация: 07.11.2017
Сообщений: 121
24.06.2019, 11:44  [ТС]
Окей, а как создать этот самый draftItem при клике?
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
25.06.2019, 00:02
Limongrass, просто задиспатчить экшен, по которому в редьюсере создастся пустой "item"
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
25.06.2019, 00:02
Помогаю со студенческими работами здесь

Redux. Изменение store после удаления элемента
Всем привет. Разбираюсь с работой React и завис с одним моментом. Делаю заметки - отобразить из базы (mongodb), добавить новую,...

Событие по клику на кнопке
На форме есть MenuStrip создаваемый через код, нужно чтобы на каждую кнопку повесилось событие которое будет например выводить сообщение...

Вывод сообщения по клику на кнопке
На форме имеются кнопки «Форматировать», «Удалить», «Очистить». Для каждой кнопки предусмотреть предупредительное сообщение, используя...

Как убрать таблицу по клику на кнопке?
Здравствуйте! Рылся в нете, но так ничего не нашел. &lt;div&gt; &lt;asp:Panel ID=&quot;Panel1&quot;...

открытие фрейма по клику по ссылке-кнопке
Всем привет.. есть такой код фрейма.. нужно повесить его открытие по ссылке - кнопке. код фрейма подключаю во внешнем ява скрипте и вешаю...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru