对KeyPress渲染问题作出反应

Question

我正在尝试制作一个充当项目符号列表的组件。有一个输入字段保存在无序列表项中(充当第一个项目符号，默认情况下它总是在那里(。该字段有一个onKeyPress函数，用于检查用户是否按下回车键(或Enter键(来创建新的项目符号。当这种情况发生时，该函数会向bulletList数组添加另一个相同的输入字段，然后使用.map()JS函数在页面上呈现该字段。

我遇到的问题如下：在始终存在的默认(第一个(输入字段上，输入功能工作得很好。用户可以按回车键，在它下面会创建一个新的输入字段。问题发生在这里：在第二个(新创建的(输入字段上，回车功能部分起作用。它将需要记录的内容作为测试记录到控制台(指示它正在被触发(，但不会在下面呈现新的输入字段。这里可能有什么问题？谢谢

原始输入字段：

<input onKeyPress={(e) => handleAdd(e)} autoFocus />

加法器功能：

const handleAdd = (e) => {
if (e.key == "Enter") {
setBulletList([...bulletList, (<input onKeyPress={(e) => handleAdd(e)} autoFocus />)]);
console.log("Worked?");
console.log(bulletList);
}

};

Answer 1

您没有任何东西可以区分第一个和第二个，所以React在有多个时会感到困惑。React经常会警告您确保每个元素都有自己独特的密钥。如果它们没有唯一的密钥/标识符，那么React不会更新虚拟dom。虚拟dom是React用来识别所做更改的内容。

给每一个人上自己的课，这样就行了。

Answer 2

您应该添加输入值，而不是输入HTML标记，如下所示：

const handleAdd = (e) => {
if (e.key == "Enter") {
setBulletList([...bulletList, e.target.value]);
console.log("Worked?");
console.log(bulletList);
}

};