在无状态组件中反应内容可编辑

Question

我正在尝试在无状态反应组件中实现一个可内容编辑的div。

我不断收到以下警告：

warning.js:36 Warning: A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

我该如何解决这个问题？

另外，如何读取 div 变化时的内容？

Answer 1

将

suppressContentEditableWarning="true"

添加到 contenteditable div。

参考：https://github.com/facebook/draft-js/issues/81

Answer 2

与任何 React 应用程序一样，浏览器插件和扩展可以修改 DOM 可能会导致草稿编辑器崩溃。

例如，语法检查器可能会修改其中的 DOM contentEditable 元素，添加下划线等样式 背景。因为如果浏览器这样做，React 就无法协调 DOM 不符合预期，编辑器状态可能无法保持在 与 DOM 同步。

https://github.com/facebook/draft-js/issues/53

已知错误。至于读取 div 中的内容，为元素分配一个 id 并..

oDoc = document.getElementById("divelement");
sDefTxt = oDoc.innerHTML;

Answer 3

Warning: A component is `contentEditable` and contains `children` managed by React

通过添加解决...

//...
<div 
   suppressContentEditableWarning // <-- Add this
   contentEditable
   className="MyClass"
   onClick={ ()=> { onEidtHandler() } }
   onBlur={ ()=> { onSaveHandler() }
  >
    Editable content
</div>
//...