输入值数组上的 useState 会删除焦点

Question

Im 使用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

所以问题是你使用项目的值作为每个<li>的key。 当您更改输入中的值时，键将更改，并且 react 会呈现一个全新的<li>，而不仅仅是更改屏幕上已经加载的值。

最简单的解决方案是使每个 Todo 成为一个对象，并为其提供一个不会更改的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;