gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:56:23 34 4
gpt4 key购买 nike

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

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

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

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

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

最佳答案

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

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

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

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

希望对你有帮助!

关于javascript - React Contenteditable - 如何将 onClick 分配给react-contenteditable 中的 <span> ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60000853/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com