Редактирование элемента списка в React

В прошлой статье "Всплывающая форма редактирования в React" был разобран код для функции редактирования содержимого div контейнера. Напомним, при клике на текст он заменялся input полем, в котором содержался такой текст. При снятии фокуса с input поля происходило сохранение текста.

В этой статье продолжим развивать подобную функцию, но теперь будем редактировать элемент списка.

Редактирование элемента списка

Частично воспользуемся примером из предыдущей статьи и допустим, что существует список, сделанный из объектов в массиве. Как и в прошлый раз, будем сохранять в объект факт того, что его свойство редактируется. Пока опустим содержание некоторых функций, чтобы облегчить восприятие кода:

import React, { useState } from 'react';

const mouseText = [
   {isEdit: false, text: 'Тише, мыши, кот на крыше'},
   {isEdit: false, text: 'А котята ещё выше'},
   {isEdit: false, text: 'Кот пошёл за молоком'},
   {isEdit: false, text: 'А котята кувырком'},
];

function App() {
   const [objArr, setObjArr] = useState(mouseText);

   function editSave(index, event) {
      // сохранение изменений (при изменении текста в input)
   }
   function editStart(index) {
      // начало редактирования (клик по строке)
   }
   function editEnd(index) {
      // окончание изменений (скрытие input поля и показ результата)
   }

   const result = objArr.map((obj, index) => {
	
      let element;
      if (obj.isEdit) {
         element = <input
            value={obj.text}
            onChange={() => editSave(index, event)}
            onBlur={() => editEnd(index)}
         />;
      } else {
         element = <span onClick={() => editStart(index)}>{obj.text}</li>;
      }
	
      return <li key={index}>{element}</li>;
   });

   return <ul>
       {result}
   </ul>;
}

export default App;

Теперь разберёмся с функциями editSave, editStart и editEnd. Первая функция должна изменять содержимое свойства text объекта в массиве, находя нужный объект по порядковому номеру. Последние две функции должны изменять свойство isEdit, которое хранит факт редактирования. Реализуем это:

import React, { useState } from 'react';

const mouseText = [
   {isEdit: false, text: 'Тише, мыши, кот на крыше'},
   {isEdit: false, text: 'А котята ещё выше'},
   {isEdit: false, text: 'Кот пошёл за молоком'},
   {isEdit: false, text: 'А котята кувырком'}
];

function App() {
   const [objArr, setObjArr] = useState(mouseText);

   function editSave(index, event) {
      // сохранение изменений (при изменении текста в input)
         const copy = Object.assign([], objArr);
         copy[index].text = event.target.value;
         setObjArr(copy);
   }
   function editStart(index) {
      // начало редактирования (клик по строке)
         const copy = Object.assign([], objArr);
         copy[index].isEdit = true;
         setObjArr(copy);
   }
   function editEnd(index) {
      // окончание изменений (скрытие input поля и показ результата)
         const copy = Object.assign([], objArr);
         copy[index].isEdit = false;
         setObjArr(copy);
   }

   const result = objArr.map((obj, index) => {
	
      let element;
      if (obj.isEdit) {
         element = <input
            value={obj.text}
            onChange={() => editSave(index, event)}
            onBlur={() => editEnd(index)}
         />;
      } else {
         element = <span onClick={() => editStart(index)}>{obj.text}</li>;
      }
	
      return <li key={index}>{element}</li>;
   });

   return <ul>
       {result}
   </ul>;
}

export default App;

Все операции в функциях editSave, editStart и editEnd происходят над копией исходного массива объектов. А затем происходит сохранение изменений в стейт с помощью функции setObjArr.