在 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 boolean 道具，並在Input元素上使用它：

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

但這對我不起作用。

我在描述editor.focus() function 的文檔中找到了這個頁面，但是當我嘗試這個時，我收到以下錯誤：

TypeError: editor.focus is not a function

Answer 1

不確定這是否有幫助，但我在將ReactEditor.focus(editor)包裝在 setTimeout() 中取得了一些成功。 我在組件樹之外執行此操作（例如，不是將其放入組件的useEffect中，而是嘗試將其放入事件處理程序中，或從控制台調用它）。

FYI, the editor.focus() docs you're referencing are on Slate 0.47, and the API has changed significantly in 0.50+ (if you're using the Transforms.select or ReactEditor.focus API, you're on 0.5+)

Answer 2

使用 slate v0.81.0這對我有用：

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