React JS: Удаление и обновление компонентов

Учимся удалять компоненты и обновлять их состояние, добавляя функционал редактирования и удаления элементов. Создадим кнопки «Сохранить» и «Удалить» для работы с объектами.

Оптимизация кода

Оптимизируем код, вынося return-часть функции в отдельную функцию eachTask. Это улучшит читаемость и структуру кода. Функция eachTask принимает те же параметры, что и исходная функция.

// ... (прежний код) ...

function eachTask( /* параметры */ ) {
  // ... (код из return-части) ...
}

// ... (вызов eachTask) ...

Использование атрибута index

Заменяем атрибут key на index. Атрибут key предназначен для React, а index удобнее для функций удаления и редактирования, предоставляя прямой доступ к элементу массива по позиции.

Функции deleteBlock и updateText

Для реализации функционала удаления и редактирования создадим функции deleteBlock и updateText.

deleteBlock

Функция deleteBlock принимает параметр i (индекс удаляемого блока). Она создаёт копию массива tasks и использует метод splice для удаления элемента по указанному индексу. Затем, с помощью setState, обновляет состояние tasks новым массивом.

function deleteBlock(i) {
  const array = [...this.state.tasks];
  array.splice(i, 1);
  this.setState({ tasks: array });
}

updateText

Функция updateText принимает параметры text (новый текст) и i (индекс элемента для обновления). Она создаёт копию массива tasks, изменяет элемент по указанному индексу и обновляет состояние tasks с помощью setState.

function updateText(text, i) {
  const array = [...this.state.tasks];
  array[i] = text;
  this.setState({ tasks: array });
}

Подготовили функции для удаления и обновления элементов. В следующем уроке интегрируем их в приложение для работы кнопок «Удалить» и «Сохранить».