管理焦点
在React组件中管理文本输入焦点可能是一项棘手的任务。 浏览器focus/blur API是必不可少的,因此通过声明性方式设置或删除焦点纯粹通过render()往往会感到尴尬和不正确,并且需要对控制焦点状态进行有挑战性的尝试。
考虑到这一点,在Facebook,我们经常选择将focus()方法暴露在包装文本输入的组件上。这打破了声明范式,但也简化了工程师在其应用程序中成功管理焦点行为所需的工作。
编辑器组件遵循此模式,因此组件上可以使用public focus()方法。 这允许您在需要时使用更高级别组件中的ref直接在组件上调用focus()。
组件中的事件侦听器将观察到焦点更改,并按预期通过onChange传播它们,因此state和DOM将保持正确的同步。
将容器点击转换为焦点您的高阶组件很可能会将Editor组件包装在某种容器中,也许使用padding来设计它以匹配您的应用程序。
默认情况下,如果用户在尝试对编辑器进行对焦时,单击此容器中的外部渲染的编辑器,编辑器将无法识别点击事件。 因此,建议您在容器组件上使用点击监听器,并使用上述的focus()方法将焦点应用于编辑器。
例如,明文编辑器示例使用此模式。
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦