Javascript 如何制作<；部门>；使用Svelte双击即可编辑内容？

我是苗条（3.0+）的新手，对于我的最新项目，我想模拟许多“待办事项”列表的功能，允许您通过双击来编辑以前提交的待办事项（）

我想，第一步是弄清楚如何使用

on:dblclick

事件处理程序使用Svelte创建div

contentEditable

。我很难弄清楚这个任务的语法（尽管我可以用它）

这是我到目前为止所掌握的苗条代码：（在这里-请参阅第页：CEDiv.Svelte）

功能编辑（事件）{
//这里有更新数据库功能
//警报（“您已‘提交’您的编辑”）
}
函数handleDblClick（）{
//我在这里需要帮助…可能在下面的div上：dblclick down。。。。
}
函数handleKeydown（）{
key=event.key；
keyCode=event.keyCode；
//如果按enter或tab键，则将div的内容提交到编辑功能。
keyCode==13 | | keyCode==9？编辑（事件）：空；
}
分区读取模式{
填充：10px；
边框：1px纯绿色；
高度：30px；
线高：30px；
宽度：500px；
保证金：0自动；
}
分区编辑模式{
填充：10px；
背景：浅绿色；
边框：3倍纯绿；
高度：26px；
线高：26px；
宽度：496px；
保证金：0自动；
}
我希望这个Div可以通过双击进行编辑。

提前感谢您的帮助

添加一个布尔变量

let editable = false;

这将在处理程序中更改

function handleDblClick(event) {
  editable = true; // or use  editable=!editable  to toggle
}

将

可编辑的
变量绑定到属性中，

并了解如何使用三元运算符动态切换类
“编辑模式”

<div 
  on:dblclick={handleDblClick} 
  class={editable ? 'edit-mode': 'read-mode'} 
  on:keydown={handleKeydown}
  contenteditable={editable}>
    I want this Div to be editable on double click.
</div>


我希望双击此Div可以编辑。

您需要抓取与单击的元素关联的div元素，然后添加子输入元素，编辑完成后，抓取输入元素的值，然后从div中删除输入元素。这很好…我认为它更“正式”苗条…这正是我试图学习的。谢谢。@Doomd是的，这是Svelte从前辈继承下来的“数据绑定”方式。不客气。
<div 
  on:dblclick={handleDblClick} 
  class={editable ? 'edit-mode': 'read-mode'} 
  on:keydown={handleKeydown}
  contenteditable={editable}>
    I want this Div to be editable on double click.
</div>