【发布时间】：2021-05-12 21:55:18
【问题描述】：
在我的 Blazor 应用程序中，我实现了鼠标单击时的卡片翻转。现在我想添加编辑功能，即当用户单击编辑按钮时，他们进入编辑模式，可以直接从 UI 编辑卡片内容。任何有关如何实现它的线索都会有所帮助。
这里是代码BlazorFiddle
【问题讨论】：
标签： html css bootstrap-4 blazor
【发布时间】：2021-05-12 21:55:18
【问题描述】：
您可以先为正面和背面卡片布局创建 2 个模板，一个用于显示模板，一个用于编辑模板，然后您可以在事件中切换这些模板的可见性并复制新值以替换原始值触发事件以退出编辑模板或绑定到对象/属性。
使用绑定选项检查我对您的代码的看法。 还将翻转事件更改为双击，这样您就可以在不翻转卡片的情况下单击输入，这对我来说还是有点问题，我只能在其末端的某些区域单击输入，其他区域似乎是“卡片背面” ' div 会妨碍您，但我认为这是一个开始，因此您可以在该思路上尝试一些东西和/或解决其他问题。
【讨论】：
-
我已经创建了2个不同的模板，感谢双击的建议，我可以这样继续下去。
-
很高兴能帮上忙！如果您对该答案感到满意，能否将其标记为最佳答案？
-
感谢您的帮助，您能否建议我如何使卡片上的内容可编辑。我尝试使用 contenteditable="true" 但无法保存所做的更改。因此，如果您能建议我如何编辑并保存它。
-
我的 blazorfiddle 目前正在编辑和保存，单击编辑字段时出现问题，但我认为这与您的卡片布局有关。尝试删除
<div class="card back">并测试小提琴，您可以使用编辑按钮进行编辑和保存进行切换。就是不知道卡背div什么时候出现，输入的某些部分是不可点击的，好像是被div干扰了。