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

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

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

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

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

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

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

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