React Contenteditable - 如何在 react-contenteditable 中将 onClick 分配给 <span>？
React Contenteditable - how can I assign an onClick to a <span> in react-contenteditable?
无论如何我可以使用这样的东西：
<span onClick={(e) => console.log(e)}>Testing</span>
在 react-contenteditable 中处理对 Testing 关键字的点击？
当我使用 html 道具时，它只需要一个 html 字符串，我想类似于 <span onclick="something()"></span>，但是有没有办法在 [=14 中做到这一点=] 而不是？
如果我使用<span onclick="something()">，我应该在哪里定义这个函数something()？我想此时我将无法访问 React 中定义的函数，对吧？那么我应该怎么做呢？
onClick 是 React 属性 所以 react-contenteditable 不知道如何处理它 - 因为 html 期望普通 html
实现您想要的（或非常接近它的）一个 hacky 方法是：
- 创建一个
onClickContentEditable 函数并将其作为 onClick 用于 ContentEditable
- 将
innerRef 添加到 ContentEditable
- 在
onClickContentEditable 中，然后单击的元素是 ContentEditable 什么都不做 - 因为我们只想与 ContentEditable 的子元素交互
- 基于单击元素的 DOM 属性（
tagName、className ...等），玩得开心！ :)
在 onClickContentEditable 中，您可以检查被单击元素的 DOM 属性并采取相应的措施。
您可以创建一个 class 来标记您要单击的元素。
您可以测试此实现 here - 沙箱是从复杂的 react-contenteditable 示例派生出来的。我在控制台中记录了交互。
希望对您有所帮助！
无论如何我可以使用这样的东西：
<span onClick={(e) => console.log(e)}>Testing</span>
在 react-contenteditable 中处理对 Testing 关键字的点击？
当我使用 html 道具时，它只需要一个 html 字符串，我想类似于 <span onclick="something()"></span>，但是有没有办法在 [=14 中做到这一点=] 而不是？
如果我使用<span onclick="something()">，我应该在哪里定义这个函数something()？我想此时我将无法访问 React 中定义的函数，对吧？那么我应该怎么做呢？
onClick 是 React 属性 所以 react-contenteditable 不知道如何处理它 - 因为 html 期望普通 html
实现您想要的（或非常接近它的）一个 hacky 方法是：
- 创建一个
onClickContentEditable函数并将其作为onClick用于ContentEditable - 将
innerRef添加到ContentEditable - 在
onClickContentEditable中，然后单击的元素是ContentEditable什么都不做 - 因为我们只想与ContentEditable 的子元素交互
- 基于单击元素的 DOM 属性（
tagName、className...等），玩得开心！ :) 在onClickContentEditable中，您可以检查被单击元素的 DOM 属性并采取相应的措施。 您可以创建一个 class 来标记您要单击的元素。
您可以测试此实现 here - 沙箱是从复杂的 react-contenteditable 示例派生出来的。我在控制台中记录了交互。
希望对您有所帮助！