useState для массива входных значений убирает фокус

Question

Я использую хук useState для обновления массива. Этот массив отображает список входных данных.

Этот код корректно обновляет хук useState, но удаляет фокус с ввода после каждого нажатия клавиши. Почему это происходит и как я могу это исправить?

import React, { useState } from "react";

const Todos = () => {
    const [todos, setTodos] = useState(["Read book", "Tidy room"]);

    function update(index: number, event: React.ChangeEvent<HTMLInputElement>) {
        const newTodos = [...todos];
        newTodos[index] = event.target.value;
        setTodos(newTodos);
    }

    return (
        <ul>
            {todos.map((item, index) => {
                return (
                    <li key={item}>
                        <input
                            type="text"
                            value={item}
                            onChange={event => update(index, event)}
                        />
                    </li>
                );
            })}
        </ul>
    );
};

export default Exercises;

Answer 1

Итак, проблема в том, что вы используете значение элемента в качестве key для каждого <li>.Когда вы изменяете значение во вводе, клавиша будет меняться и реагирует на рендеринг полностью нового <li> вместо того, чтобы просто изменить тот, который уже загружен на экран.

Самое простое решение - сделать каждыйСоздайте объект и дайте ему id, который не изменится:

import React, { useState } from "react";

interface Todo {
  value: string;
  id: string;
}

const Todos = () => {
    const [todos, setTodos] = useState<Todo[]>([
      { 
        value: "Read book",
        id: '1'
      }, 
      {
        value: "Tidy room",
        id: '2'
      }
    ]);

    function update(index: number, event: React.ChangeEvent<HTMLInputElement>) {
        const newTodos = [...todos];
        newTodos[index].value = event.target.value;
        setTodos(newTodos);
    }

    return (
        <ul>
            {todos.map((item, index) => {
                return (
                    <li key={item.id}>
                        <input
                            type="text"
                            value={item.value}
                            onChange={event => update(index, event)}
                        />
                    </li>
                );
            })}
        </ul>
    );
};

export default Exercises;