javascript - 在 SlateJS 中，当存在多个编辑器时，如何将焦点更改为特定的编辑器？

Question

我的应用中有多个 SlateJS 编辑器，代表各个页面。添加新页面时，我希望将焦点更改为该页面中的编辑器。

我不知道该怎么做!我检查了文档，有 onFocus和 onBlur钩子(Hook)插件，但这是为了对焦点变化使用react。在 slack community snippets有这个:

// Moving cursor to the end of the document
ReactEditor.focus(editor);
Transforms.select(editor, Editor.end(editor, []));

但我也不能让它工作。这是我的代码的精简版:

根元素

<div>
    {pages.map((pageID: number) => (
        <Page onChange={updatePage(pageID)}/>
    ))}
</div>

页面元素

<div>
    <Input onChange={onChange}/>
</div>

然后是 <Input/>元素呈现 Slate和 Editable来自 slate-react 的组件.

我尝试过 RTFM，但除了 plugins page 之外，我确实找不到任何有关管理焦点的信息.

我试过添加 focusOnRender bool 属性，并在 Input 上使用它的钩子(Hook)元素:

useEffect(() => {
    if (focusOnRender)
        ReactEditor.focus(editor);
}, [focusOnRender]);

但这对我不起作用。

我找到了 this page in the docs它描述了 editor.focus()功能，但是当我尝试这个时，我收到以下错误:

TypeError: editor.focus is not a function

Answer 1

不确定这是否有帮助，但我在包装 ReactEditor.focus(editor) 方面取得了一些成功在 setTimeout() 中。我在组件树之外执行此操作(例如，不是将其放入组件的 useEffect 中，而是尝试将其放入事件处理程序中，或从控制台调用它)。
仅供引用，editor.focus()您引用的文档在 Slate 0.47 上，并且 API 在 0.50+ 中发生了显着变化(如果您使用 Transforms.select 或 ReactEditor.focus API，则您使用的是 0.50+ 版本)