时间戳

首页 > 解决方案 > 在 SlateJS 中，当存在多个编辑器时，如何将焦点更改为特定的编辑器？

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

问题描述

我的应用中有多个 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

标签： javascriptreactjstypescriptfocusslatejs

解决方案

不确定这是否有帮助，但我已经成功包装ReactEditor.focus(editor)了 setTimeout()。我在组件树之外执行此操作（例如，不是useEffect将其放入组件中，而是尝试将其放入事件处理程序中，或从控制台调用它）。

仅供参考，editor.focus()您引用的文档在 Slate 0.47 上，并且 API 在 0.50+ 中发生了显着变化（如果您使用Transforms.selector ReactEditor.focusAPI，则您使用的是 0.50+ 版本）

推荐阅读