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

Question

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

我不知道该怎么做！我的文档检查，并有onFocus和onBlur钩插件，但这是反应焦点的变化。在slack 社区片段上有这样的：

// 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，但除了插件页面之外，我合法地找不到任何关于管理焦点的信息。

我试过添加一个focusOnRender布尔道具，并在Input元素上使用它的钩子：

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

但这对我不起作用。

我在描述一个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.focusAPI，则在 0.5+ 上）