如何解决如何在 vanilla-typescript todo 应用程序中设置删除项目按钮
我正在使用香草打字稿创建一个基本的待办事项列表应用程序。将按钮附加到每个列表项后,我希望在用户单击特定列表项上的按钮时删除这些项目。为了执行这个,我尝试在 index.ts 中添加第二个 addEventListener 方法来监听删除按钮的点击,然后删除父元素的子元素。我的 addEventListener 方法如下所示:
listItemBtn.addEventListener("click",(e: Event) => {
const element = e.target as HTMLUListElement;
element.removeChild(element);
});
但是,我一直在控制台中收到一条错误消息,显示“未捕获的类型错误:无法读取 null 的属性 'addEventListener'”。我不确定为什么我不能毫无错误地将 .addEventListener 附加到 listItemBtn 。知道如何解决这个问题吗?
这是 CodeSandBox 中项目的链接:https://codesandbox.io/s/vanilla-typescript-forked-xnnf4
解决方法
您正在寻找存在之前的 listItemBtn
。如果添加这一行
document.querySelectorAll("#listItemBtn").forEach(console.log);
在 form.addEventListener
的末尾,您将开始看到它填充了元素。
此代码中有很多需要更改的地方。使用 as
时要谨慎,因为它可以防止 Typescript 看到潜在的运行时错误,例如元素可能是 null
。
您的问题是如何设置删除按钮,所以我实际上并不认为 querySelectorAll
是正确的方法。我会在您创建 btn
的位置添加侦听器。此时,您已经拥有 button
元素作为变量。
您的侦听器功能本身存在问题。同样,您在 as
中遇到了麻烦的 const element = e.target as HTMLUListElement;
,因为目标是 button
,而不是 li
。
element.removeChild(element)
是错误的,因为您需要在父对象上调用 removeChild
,例如 parent.removeChild(child)
。您可以看起来像 element.parentElement
(可能是 null
)。由于我们将此函数移动到 ListTemplate
中,因此我们可以访问父 li
变量。我们要删除的元素是 li
中的 ul
。所以实际上我们的 e.target
也就是 btn
并不是很有用。
在 render
的 ListTemplate
方法中,执行以下操作:
btn.addEventListener("click",() => {
this.container.removeChild(li);
});
如评论中所述,您不应设置不唯一的 id
。您可以改用 className
:
btn.className = "listItemBtn";
但你只需要它来做造型。我们不再在任何地方查询这个元素。
您可以清理您的 form
提交侦听器。没有理由创建一个变量然后分配它。直接赋值就行了。这也消除了手动指定类型的需要,因为类型是从您为变量设置的值中知道的。
form.addEventListener("submit",(e) => {
e.preventDefault();
const value = listItem.value;
const doc = new ListItem(value);
list.render(doc,value,"start");
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。