React Contenteditable - 如何将 onClick 分配给 react-contenteditable 中的 ？

【问题标题】：React Contenteditable - how can I assign an onClick to a in react-contenteditable?React Contenteditable - 如何将 onClick 分配给 react-contenteditable 中的 ？
【发布时间】：2020-01-31 09:09:43
【问题描述】：

无论如何我可以使用这样的东西：

<span onClick={(e) => console.log(e)}>Testing</span>

在react-contenteditable里面处理Testing关键字的点击？

当我使用 html 属性时，它只需要一个 html 字符串，我想像  这样的，但有没有办法在 react 中代替？

如果我使用，我应该在哪里定义这个函数something()？我想此时我将无法访问 react 中定义的函数，对吧？那我该怎么做呢？

【问题讨论】：

我认为你需要对 dangerouslySetInnerHTML 做一些事情
作为ContentEditable的道具？
你的意思是你想把你在 contenteditable 中写的文本当作 React？还是 contenteditable 本身的某些元素？
我想为 ContentEditable 中的部分文本添加点击监听器，例如，如果 ContentEditable html 为 My name is Ali，我如何将 onClick 添加到此跨度？

标签： javascript reactjs contenteditable

【解决方案1】：

onClick 是一个 React 属性，所以 react-contenteditable 不知道如何处理它 - 因为 html 需要纯 html

实现你想要的——或者非常接近它——的一个hacky方法是：

创建一个onClickContentEditable 函数，它是onClick 还是ContentEditable
将innerRef 添加到ContentEditable
在onClickContentEditable 中，那么被点击的元素是ContentEditable 什么都不做 - 因为我们只想与ContentEditable 的子元素交互
基于被点击元素的 DOM 属性（tagName、className ...等），玩得开心！ :) 在onClickContentEditable 中，您可以检查被点击元素的 DOM 属性并采取相应措施。您可以创建一个类来标记要单击的元素。

您可以测试此实现 here - 沙箱是从复杂的 react-contenteditable 示例中分叉出来的。我在控制台中记录了交互。

希望对你有帮助！

【讨论】：