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

【问题标题】：React contenteditable in stateless component在无状态组件中反应内容可编辑
【发布时间】：2017-06-19 23:00:23
【问题描述】：

我正在尝试在无状态反应组件中实现一个可内容编辑的 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 的内容？

【问题讨论】：

标签： javascript reactjs contenteditable

【解决方案1】：

将 suppressContentEditableWarning="true" 添加到 contenteditable div。

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

【讨论】：

【解决方案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;

【讨论】：