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

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函数，并且将其作为onClick的ContentEditable作为
2. 将innerRef添加到ContentEditable
3. 在onClickContentEditable中，然后单击的元素是ContentEditable，不执行任何操作-因为我们只想与ContentEditable的子级进行交互>
4. 基于被单击元素（tagName，className ...等）的DOM属性，很有趣！ :)在onClickContentEditable中，您可以检查所单击元素的DOM属性并采取相应的措施。您可以创建一个类来标记要单击的元素。

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

希望有帮助！