#reactjs
#reactjs
Вопрос:
Я создаю приложение Todo с использованием Redux. Я только создаю, создаю и удаляю.
Я хочу создать <Edit />
сообщение, в котором будет отображаться / редактироваться задача <TodoForm />
.
Как я могу это сделать ?
<>
<TodoForm />
<TodoList />
</>
Я думаю, что я собираюсь переместить локальное состояние (useState) в глобальное состояние (redux).
Есть ли какие-либо советы по применению, пожалуйста, предложите
PS Большая часть руководства в Интернете просто описывает простое добавление, удаление задачи todo, но это не редактирование обложки. Это то, что я хочу
Мой кодовый ящик: https://codesandbox.io/s/upbeat-darkness-miibs
Комментарии:
1. что вы уже пробовали до сих пор?
2. Я создал образец приложения, используя react context API для управления глобальной областью, проверьте это stackblitz.com/edit /…
Ответ №1:
Мы мало что можем получить из информации, которую вы предоставили выше. В любом случае, я просто предполагаю здесь:-
- прямо сейчас у вас есть вся ваша форма
state
, объявленная как локальнаяstate
внутри вашегоTodoForm
компонента. - у вас есть только один глобальный
state
файл для хранения всего списка задач. Предпочтительно вarray
Я бы предложил просто:-
- создайте новый локальный
state
компонентTodoForm
, который может выполнять функции редактирования, которые вы хотите. (пример:const[isEdit, setIsEdit] = useState(false)
) - создайте a
function
для запуска события редактирования (конечно, это событие должно отражать / обновлять ваш глобальныйstate
array
список задач) - создайте
button
событие для запуска выше и изменитеisEdit
state
сfalse
наtrue
(мы используем это, чтобы дать возможность отменить редактирование). После нажатия кнопки редактирования обновите / заполните всеinput
поля текущими данными, которые вы хотите отредактировать (если вы хотите отменить редактирование, создайте кнопку отмены, которая будет отображаться только тогда, когдаisEdit
state
равноtrue
. При нажатии сбросьте обратноisEdit
state
false
и удалите текущие данные из всехinput
заполнителей)