как обновить элемент в списке массива в других компонентах

#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 заполнителей)