温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - React Contenteditable
javascript reactjs contenteditable

javascript - 反应内容可编辑

发布于 2020-03-29 13:01:38

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

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

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

当我使用html prop时,它只需要一个html字符串,就像<span onclick="something()"></span>我想的那样,但是有办法react代替吗?

如果我<span onclick="something()">在哪里使用该函数something()我想在这一点上我将无法访问react中定义的功能,对吗?那我该怎么做呢?

查看更多

查看更多

提问者
Ali Elkhateeb
被浏览
24
bamse 2020-02-03 22:46

onClick是React属性,因此react-contenteditable不知道该怎么做-因为html期望使用纯HTML

一种实现您想要的(或几乎接近)想要的方法:

  1. 创建一个onClickContentEditable功能是它onClickContentEditable
  2. 添加innerRefContentEditable
  3. 在中onClickContentEditable,则clicked元素ContentEditable什么都不做-因为我们只想与的子元素互动ContentEditable
  4. 基于DOM属性的clicked元素(tagNameclassName...等)会很有趣!:)在其中,onClickContentEditable您可以检查clicked元素的DOM属性并采取相应的措施。您可以创建一个类来标记要单击的元素。

您可以在此处测试此实现-沙盒是从复杂react-contenteditable示例中派生的我在控制台中记录了交互。

希望能帮助到你!