手记

Draft 文档翻译 - 高级主题 - 管理焦点

管理焦点

在React组件中管理文本输入焦点可能是一项棘手的任务。 浏览器focus/blur API是必不可少的,因此通过声明性方式设置或删除焦点纯粹通过render()往往会感到尴尬和不正确,并且需要对控制焦点状态进行有挑战性的尝试。

考虑到这一点,在Facebook,我们经常选择将focus()方法暴露在包装文本输入的组件上。这打破了声明范式,但也简化了工程师在其应用程序中成功管理焦点行为所需的工作。

编辑器组件遵循此模式,因此组件上可以使用public focus()方法。 这允许您在需要时使用更高级别组件中的ref直接在组件上调用focus()。

组件中的事件侦听器将观察到焦点更改,并按预期通过onChange传播它们,因此state和DOM将保持正确的同步。

将容器点击转换为焦点

您的高阶组件很可能会将Editor组件包装在某种容器中,也许使用padding来设计它以匹配您的应用程序。

默认情况下,如果用户在尝试对编辑器进行对焦时,单击此容器中的外部渲染的编辑器,编辑器将无法识别点击事件。 因此,建议您在容器组件上使用点击监听器,并使用上述的focus()方法将焦点应用于编辑器。

例如,明文编辑器示例使用此模式。

0人推荐
随时随地看视频
慕课网APP