使用ReactJS在状态中添加新值

Question

我是ReactJS的新手，我有一个问题，希望你也能帮我解决这个问题。

这是我的代码

我的问题是：你能帮我这样修改代码吗？在每个列表的末尾，总是有一个空的输入字段作为最后一个条目。因此，一旦有人在最后一个输入字段中写入了一些内容，就会自动将另一个空输入字段推送到列表中。当一个不是最后一个的输入字段在编辑过程中被清空时，该条目就会被删除。

我首先尝试创建阵列的状态

const [list, setList] = useState([]);
return (
<div className="App">
{list.map((el, i) => {
return (
<List
title={el}
id={i + 1}
handleChange={(e) => setList(...e.target.value, list)}
/>
);
})}
</div>
);

我还创建了List组件，用于呈现我的输入

const List = ({ title, id, handleChange }) => {
return (
<div>
{id}
<input onChange={handleChange} value={title} />
</div>
);
};

但是我有一堆错误，请帮我解决这个问题，我会非常感谢你的。

这是的最终结果

Answer 1

我已经对您的代码进行了编辑，请尝试以下操作：

https://codesandbox.io/s/gifted-lumiere-32wg5?file=/src/App.js

简言之，您需要在列表映射之后呈现文本输入，以确保最后总是有一个额外的空白。

这也意味着你需要保持它的状态，这样一个新的值状态就需要存在，我做了它，这样当你按下回车键时，它会为你将它添加到列表中。

您现在也可以正确地更新列表项。