draft.js：使编辑器内容变为多页

Question

我有一个很难解决的问题。

Here is my sample project

基本上，我想创建一个可编辑的类似书的容器，并且由于每个书页都是另一个容器，所以一旦页面充满文本，我就无法弄清楚如何使编辑器从一个页面过渡到另一个页面。

这是我要实现的目标：

---

我首先想到的是对多个编辑器实例使用共享状态，但是正如您在示例代码中看到的那样，它不能按预期方式工作，并且相同的文本出现在两个页面中。

使用draft.js时如何实现多容器转换？

Answer 1

通常，逻辑是听第一个编辑器的变化，计算字符/单词/行数（或者，例如，如果编辑器具有滚动，则进行更高级的计算），如果需要，最后集中第二个编辑器。

此答案涵盖，聆听，虚拟计算，并专注于下一个编辑器。该答案不包括计算本身也不包括动态页面数。但我相信这是您最终目标的方向。

听

首先，我将状态创建和处理移回了Editor组件本身。当其内容更改时，将通知父组件（“ App”）什么“感兴趣”。

但是现在，App

需要访问（“ draft-js”）编辑器才能调用focus。这将通过在App中创建“ ref”并使用forwardRef进行传播来解决。

const editorRef = React.useRef();

const Editor = React.forwardRef((props, ref) => {
  return <MyEditor name="editor-2" forwardRef={ref} />;
});

...

return (
  ...
  <Editor ref={editorRef} />
)
和在Editor.js中
function MyEditor({ onChange, forwardRef }) {
  ...
  return (
    <Editor
      ref={forwardRef}
  )
});
下一步是将onChange添加到编辑器，以便App
在内容更改时得到通知。

<Editor
  ref={forwardRef}
  stripPastedStyles
  editorState={editorState}
  onChange={editorState => {
    setEditorState(editorState);
    onChange && onChange(editorState); // <---
  }}
/>
处理更改和关注焦点
现在是第一个编辑器

<MyEditor name="editor-1" onChange={onEditorChange} />
[onEditorChange是
const onEditorChange = editorState => {
  const text = editorState.getCurrentContent().getPlainText();
  if (text.length >= 5) {
    setTimeout(() => {
      editorRef.current.focus();
    });
  }
};
当前，它检查内容的长度是否为5。您可能希望以更复杂的方式进行计算。
最后一个问题是，为什么setTimeout？好吧，简单的答案是，没有它，“ draft-js”将引发错误。我相信这与他们执行release / delete / clear全局变量之类的东西有关。

也是最重要的部分，代码和实时演示：）

https://codesandbox.io/s/young-shape-t6kcc?file=/src/App.js