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);
        }
        
    };

反应 onKeyPress 渲染问题

2 个答案: