在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和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.50+ 版本)

Answer 2

使用石板v0.81.0这是对我有用的：

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