javascript - 如何找到代表其实际 html 元素的 React DOM 节点?

标签 javascript html reactjs

如果您感兴趣,这是我的问题:我想找到用户选择的文本,并在该选择的开始和结束处插入一个标签(以突出显示文本)。

根据 StackOverflow 的顶尖思想引用,找到选择的最佳方法是使用 window.getSelection()

这与 getRangeAt(0) 相结合,产生了一个列表,其中 startContainerendContainer 看起来特别有前途。 startContainer.parentNode 直接指向我开始选择的 p 标签。太棒了!

但是,我如何真正知道它代表 React DOM 中的哪个元素?我如何操纵正确的东西?

最佳答案

window.addEventListener("mousedown", function(e){console.log(e)});

使用此事件监听器(或更好地使用 mouseup),您可以找到有关目标的所有数据,例如:如果您将这段代码复制/粘贴到控制台并查看日志,您将找到有关的所有信息此事件包括目标、时间戳、shift 键、控制键、x、y、哪个鼠标按钮以及所有相关信息。如果将其与您之前描述的内容结合起来,您将获得所需的结果

关于javascript - 如何找到代表其实际 html 元素的 React DOM 节点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49033284/

相关文章:

reactjs - 在构造函数中动态创建 Ref

javascript - 如何在鼠标悬停时选择文本,然后将其放入变量中以便在 php 中进一步使用

javascript - 如何将 Onclick 效果设置为仅在特定时间起作用?

html - 如何自定义标题

javascript - 在组件中处理通过 react-router 传递的参数

javascript - 如何向从react-router链接标签呈现的 anchor 标签添加ID属性?

javascript - 使用 Jquery Slide 时盒子阴影消失

javascript - Express 中间件、next 和 Promises

javascript - 基于 URL 中的 GET 参数嵌入模板

javascript - 确保加载 requireJS 条件模块