管理焦点

id: advanced-topics-managing-focus

title: 管理焦点

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

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

Editor组件遵循此模式，因此该组件上有一个public(公开的) focus()方法。 这样，您就可以在更高级别的组件中使用ref来在需要时直接在组件上调用focus()。

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

转换容器点击以使编辑器聚焦

您的更高级别的组件很可能会将Editor组件包装在某种类型的容器中，也许可以通过填充使其样式化以匹配您的应用程序。

默认情况下，如果用户在尝试让编辑器在此容器内聚焦，但却在渲染的编辑器之外点击，则该编辑器将不会触发click事件。 因此，建议您在容器组件上使用单击侦听器，并使用上述的focus()方法将焦点应用于编辑器。

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