ITPub博客

首页 > IT职业 > IT职场 > Draft 文档翻译 - 高级主题 - 管理焦点

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

IT职场 作者:m53469 时间:2021-09-09 09:05:28 0 删除 编辑
管理焦点

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

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

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

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

将容器点击转换为焦点

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

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

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

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2819/viewspace-2799238/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-19

  • 博文量
    80
  • 访问量
    13444