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

Question

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

我不知道该怎么做！我已经签入了文档，并且有onFocus和onBlur钩子插件，但这是为了响应焦点更改。在松弛的社区片段上有以下内容：

// 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-react呈现Slate和Editable组件。

我尝试过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中，而是尝试将其放入事件处理程序中，或从控制台调用它)。

FYI，您所引用的editor.focus()文档位于Slett0.47上，0.50+中的API发生了重大变化(如果您使用的是Transforms.select或ReactEditor.focus API，则使用的是版本0.50+)

Answer 2

使用板岩v0.81.0，这就是对我有用的地方：

useMemo(() => {
   Transforms.select(editor, { offset: 0, path: [0, 0] });
}, []);