问题描述
我正在尝试制作一个充当项目符号列表的组件。无序列表项中包含一个输入字段(作为第一个项目符号,默认情况下始终存在)。该字段有一个 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);
}
};
解决方法
您没有任何区分第一个和第二个的东西,因此当有多个时 React 会感到困惑。 React 经常会警告你确保每个元素都有自己的唯一键。如果他们没有唯一的键/标识符,那么 React 将不会更新虚拟 dom。虚拟 dom 是 React 用来识别所做更改的。
给每个人一个自己的班级,这样应该就行了。
,您应该添加输入值,而不是输入 HTML 标记,如下所示:
const handleAdd = (e) => {
if (e.key == "Enter") {
setBulletList([...bulletList,e.target.value]);
console.log("Worked?");
console.log(bulletList);
}
};