React DraftJS 光标在输入现有内容后自动跳转到开头并开始向后输入？

Question

我正在使用 DraftJS 编辑文本内容，但是当我尝试编辑从 DB 检索并加载到编辑器中的任何现有内容时，光标会自动跳转到文本的开头并开始输入倒退。

我已将Editor 导入Bulletin.js，因此我必须通过将getContent 传递给Editor 来获取内容，并在handleEditorChange 函数中使用getContent 检索原始html Editor。

我发现如果我删除了 getContent 函数以将 handleEditorChange 中的原始 HTML 传回，编辑器可以正常工作，但我将无法将 html 内容返回到Bulletin.js.

Here's 我创建的代码框供参考。

Answer 1

问题是您在每次更改时都在此处设置了一个新的EditorState：

useEffect(() => {
  if (htmlContent) {
    let convertedToHTML = decodeURIComponent(htmlContent);
    const blocksFromHtml = htmlToDraft(convertedToHTML);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(
      contentBlocks,
      entityMap
    );
    setEditorState(EditorState.createWithContent(contentState));
  }
}, [htmlContent]);

htmlContent 始终在发生变化，因为您通过 getContent 函数在每次更改时将 EditorState 转换为 HTML。

如果您想用htmlContent 初始化您的EditorState，您可以在useState 函数中执行此操作并删除useEffect：

const [editorState, setEditorState] = useState(() => {
  if (htmlContent) {
    let convertedToHTML = decodeURIComponent(htmlContent);
    const blocksFromHtml = htmlToDraft(convertedToHTML);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(
      contentBlocks,
      entityMap
    );
    return EditorState.createWithContent(contentState);
  }
  return EditorState.createEmpty()
});