Как сделать так, чтобы по потери фокуса input’ом измененный текст попадал в соответствующий li?

Для решения данной задачи вам потребуется использовать состояние компонента и обработчики событий.

Во-первых, создайте компонент, в котором будет содержаться список элементов li и input для редактирования текста:

import React, { useState } from 'react';

const MyComponent = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  const [editedText, setEditedText] = useState('');

  const handleInputChange = (event) => {
    setEditedText(event.target.value);
  };

  const handleInputBlur = (index) => {
    if (editedText !== '') {
      const newItems = [...items];
      newItems[index] = editedText;
      setItems(newItems);
      setEditedText('');
    }
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          <input
            type="text"
            value={index === editedIndex ? editedText : item}
            onChange={handleInputChange}
            onBlur={() => handleInputBlur(index)}
          />
        </li>
      ))}
    </ul>
  );
};

export default MyComponent;

В данном компоненте мы используем хук useState для хранения состояния списка элементов и редактируемого текста.

В элементе li мы отображаем input с текущим текстом элемента. Если input в фокусе, то отображается измененный текст из состояния editedText, иначе отображается исходный текст из списка items.

При изменении текста в input, мы вызываем обработчик handleInputChange, который обновляет состояние editedText.

При потере фокуса input вызывается обработчик handleInputBlur, который проверяет, изменился ли текст в input. Если да, то обновляется соответствующий элемент списка items с помощью метода setItems и состояния newItems. Затем состояние editedText сбрасывается.

Таким образом, при потере фокуса input измененный текст попадает в соответствующий элемент списка li.