Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >将组件映射为“contentEditable”元素。如何在通过backspace删除组件时避免Node.removeChild错误?

将组件映射为“contentEditable”元素。如何在通过backspace删除组件时避免Node.removeChild错误?
EN

Stack Overflow用户
提问于 2021-10-28 17:43:16
回答 1查看 117关注 0票数 1

我正在做一个不和谐的克隆,并试图在聊天栏中实现一个“被提及”的特性。

我的元素看起来如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
       <span
          contentEditable
          suppressContentEditableWarning={true}
          onInput={(e) => {
            setMsg(e.target.innerHTML);
          }}
        >
          {mentions &&
            mentions.map((obj, i) => {
              return (
                <>
                  <MentionWrapper
                    key={i}
                    displayName={obj.displayName}
                    uid={obj.uid}
                    id={obj.id}
                  />
                  <span>&nbsp;</span>
                </>
              );
            })}
        </span>

当我通过backspace删除其中一个“提到”组件时,我遇到了问题。如果我试图在以后的任何时候设置set变量的状态,则响应重新呈现,就会得到一个错误。

Node.removeChild:要删除的节点不是此节点contentEditable的子节点

我明白为什么会发生这种事。我只是想知道有没有办法解决这个问题。

EN

回答 1

Stack Overflow用户

发布于 2022-04-07 07:34:15

我正在用键来解决数组改变长度时的错误

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <span
          key={mentions.length}
          contentEditable
          suppressContentEditableWarning={true}
          onInput={(e) => {
            setMsg(e.target.innerHTML);
          }}
        >
          {mentions &&
            mentions.map((obj, i) => {
              return (
                <>
                  <MentionWrapper
                    key={i}
                    displayName={obj.displayName}
                    uid={obj.uid}
                    id={obj.id}
                  />
                  <span>&nbsp;</span>
                </>
              );
            })}
        </span>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69762696

复制
相关文章
kettle的应用组件 、流程组件、查询组件、连接组件、统计组件、映射组件、脚本组件
2.3、空操作一般作为数据流的终点。在kettle的sample例子中经常使用,但是实际开发中很少使用。
别先生
2020/02/26
3.7K0
将vue组件发布为npm包
如果没有全局安装@vue/cli-init,还需要先安装@vue/cli-init
conanma
2021/12/06
1.2K0
React 元素 VS 组件
在前面的「前端框架」中,我们从Fiber的实现机制描绘了React在页面渲染和数据处理方面做了的努力。其中有很多源码级别的概念。例如,React-Element/React-Fiber/Current Tree 和 workInProgress Tree等。
前端柒八九
2022/08/25
7540
React 元素 VS 组件
vue组件中修改组件外元素样式
以上方式修改某些组件的样式,这样会涉及到从 html 层级选择,由于我 style 标签是这样写的
蓓蕾心晴
2023/05/31
5890
vue组件,可以通过npm引用的组件
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。 功能说明 多层弹出时,只有一个背景层。 弹出层嵌入内部组件。 弹出层按钮支持回调 源码下载
sam dragon
2018/01/17
1.3K0
vue组件,可以通过npm引用的组件
java之hibernate之组件映射
1.在开发中,有的类信息比较复杂,而且某几个信息可以组成某一个部分,这个时候可以采用组件映射,组件映射是一张表映射到多个类。表结构
Vincent-yuan
2019/09/11
5370
java之hibernate之组件映射
python遍历字典删除元素错误
这里报了一个这样的错误: RuntimeError: dictionary changed size during iteration;
生信编程日常
2020/04/01
3.1K0
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理 在公司项目中,我们使用了 element-ui 组件库,非常的好用。近日我们的项目升级
FungLeo
2018/01/08
1.6K0
VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
【Unity3D】Unity 组件 ③ ( 为物体添加 AudioSource 组件 | 添加 AudioSource 组件 | 导入音频文件 | 为组件设置音频 | Transform 变换组件 )
在 Unity 中 , 使用 AudioSource 组件 , 可以 播放声音 ;
韩曙亮
2023/03/30
2.3K0
【Unity3D】Unity 组件 ③ ( 为物体添加 AudioSource 组件 | 添加 AudioSource 组件 | 导入音频文件 | 为组件设置音频 | Transform 变换组件 )
数据映射组件NewLife.XCode优势
数据映射组件XCode优势 XCode是一个超越了ORM范围的映射组件,除了对象到关系数据库的映射外,还有到网络和其它二进制形式等的映射,所以称之为数据映射组件。 相对于国内外其它ORM,XCode具有以下优势: 1,采用最好的分页算法,高效处理海量数据。数据分页的思想贯穿整个XCode的生命周期,任何一个不论大小的测试,数据样本都是单表一千万起。其它很多ORM,在数据达到百万之后会变慢,达到千万后基本上就卡死了。XCode同时支持最流行的几大数据库分页算法,经过10多年的经验积累,根据数据库类型、版本以及
大石头
2018/01/15
9280
组件分享之后端组件——docconv组件将文档转换为纯文本
近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
cn華少
2022/03/06
7300
组件分享之后端组件——cat组件将文档转换为纯文本
近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
cn華少
2022/03/06
5370
36. Vue组件切换-使用component元素实现组件切换
在登陆页面的需求中,一般都会有登陆、注册两个按钮,然后点击不同的按钮显示不同的页面。在这里对应的页面可以是一个组件。
Devops海洋的渔夫
2022/01/17
6940
36. Vue组件切换-使用component元素实现组件切换
39. Vue组件切换-使用component元素实现组件切换
上一篇章使用v-if和v-else结合一个flag属性值来控制组件之间的切换。本章节使用components元素来更加直接的切换组件。
Devops海洋的渔夫
2020/07/02
4.9K0
vue中父子组件通过ref传值「dialog组件」
一个基于Vue的项目,有可能会很多的组件,组件之间难免需要进行数据的传递,比如: 父组件 传数据 给子组件;子组件传数据给父组件等,需要用到组件之间的通信处理方式。 项目中经常用到element中的dialog组件,现记录父子组件通过ref传值。
青梅煮码
2023/03/02
2.8K0
Java Swing中动态删除组件
    一直以来都不喜欢Java的GUI程序,界面丑陋,而且感觉功能也不强大,但是为了跨平台也没办法!
卡尔曼和玻尔兹曼谁曼
2019/01/25
2.1K0
Linux/Unix系统SSH远程按Backspace键删除时出现^H的处理方法
在linux/unix系统中连接SSH远程工作时,输出字符后按Backspace键删除时,会出现^H,这对习惯了按Backspace键删除的用户来说,感觉非常别扭,虽然可以通过Ctrl+Backspace组合键实现删除功能。
全栈程序员站长
2021/10/08
1.9K0
【Unity3D】Unity 组件 ② ( 删除 Light 组件 | 添加 Light 组件 | 构造物体组件 | 添加网格过滤器组件 | 添加网格渲染器组件 )
选中 平行光源 物体 , 在右侧的 Inspector 检查器窗口 中 , 点击 Light 组件右上角的
韩曙亮
2023/03/30
7490
【Unity3D】Unity 组件 ② ( 删除 Light 组件 | 添加 Light 组件 | 构造物体组件 | 添加网格过滤器组件 | 添加网格渲染器组件 )
避免单线程单元 (STA) COM 组件
默认情况下,ASP.NET 不允许任何 STA COM 组件在页面内运行。若要运行它们,必须在 .aspx 文件内将 ASPCompat=true 属性包含在 @ Page 指令中。这样就将执行用的线程池切换到 STA 线程池,而且使 HttpContext 和其他内置对象可用于 COM 对象。前者也是一种性能优化,因为它避免了将多线程单元 (MTA) 封送到 STA 线程的任何调用。
Java架构师必看
2021/03/22
6690
组件分享之后端组件——用于将日志写入滚动文件的组件包lumberjack
近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
cn華少
2022/05/13
4790

相似问题

VueJS:如何在contentEditable div中动态嵌入contentEditable组件

11

标签组件不会使用BackSpace - React本机删除

11

Tinymce contenteditable和backspace按钮

18

更新使用Fluent NHibernate映射的组件时避免删除并重新插入

22

contenteditable div backspace和删除文本节点问题

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文