Всплывающая форма редактирования в React

Существует масса механих элементов пользовательских интерфейсов. Некоторые из них уже прижились и стали интуитивно понятными. К примеру, возможность изменения текста в полях при клике на них. Попробуем воссоздать подобное поведение с использованием стейтов в React.

Представим, что существует div контейнер, в котором может содержаться пользовательский текст, загружающийся из стейта.

import React, { useState } from 'react';

function App() {
   const [text, setText] = useState('Тише, мыши, кот на крыше');
 
   return <div>
       {text}
   </div>;
}

export default App;

Попробуем сделать так, чтобы при клике на этот текст он заменялся полем для ввода текста (input). Причём содержимое поля должно содержать текущий текст. Для этого сделаем дополнительный стейт, в котором сохраним факт внесения изменений. И по его значению будем показывать либо div контейнер, либо поле для ввода:

import React, { useState } from 'react';

function App() {
   const [text, setText] = useState('Тише, мыши, кот на крыше');
   const [isEdit, setIsEdit] = useState(false);
 
   let return;
   if (isEdit) {
      return = <input value={text} />;
   } else {
      return = <div onClick={() => setIsEdit(true)}>{text}</div>;
   }

   return <div>
       {return}
   </div>;
}

export default App;

Если загрузить страницу с таким кодом, то будет показан текст "Тише, мыши, кот на крыше". При клике на него текст заменится полем ввода input, в котором будет этот текст. Но в коде не предусмотрена возможность изменения этого текста и сохранение изменений в стейт, поэтому доработаем пример.

Сделаем сохранение текста input поля в стейт по этому событию onChange. И добавим фиксацию окончания редактирования поля с помощью события onBlur. Это событие вызывается, когда элемент теряет фокус:

import React, { useState } from 'react';

function App() {
   const [text, setText] = useState('Тише, мыши, кот на крыше');
   const [isEdit, setIsEdit] = useState(false);
 
   let return;
   if (isEdit) {
      return = <input
         value={text}
         onChange={() => setText(event.target.value)}
         onBlur={() => setIsEdit(false)}
      />;
   } else {
      return = <div onClick={() => setIsEdit(true)}>{text}</div>;
   }

   return <div>
       {return}
   </div>;
}

export default App;