javascript - React Contenteditable - 如何将 onClick 分配给react-contenteditable 中的 <span> ？

Question

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

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

内部react-contenteditable处理 Testing 的点击关键字？

当我使用 html 属性时，它只需要一个 html 字符串，例如 <span onclick="something()"></span>我想，但是有没有办法在 react 中做到这一点？相反？

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

Answer 1

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

实现您想要的(或非常接近它)的一种巧妙方法是:

1. 创建一个 onClickContentEditable 函数，并将其作为 ContentEditable 的 onClick
2. 将 innerRef 添加到 ContentEditable
3. 在 onClickContentEditable 中，则单击的元素是 ContentEditable 不执行任何操作 - 因为我们只想与 ContentEditable 的子元素交互
4. 基于被点击元素的 DOM 属性(tagName、className ...等)，玩起来很有趣! :) 在 onClickContentEditable 中，您可以检查被单击元素的 DOM 属性并采取相应的操作。 您可以创建一个类来标记要单击的元素。

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

希望对你有帮助!