Draft 文件翻譯 - 高階主題 - 管理焦點

在React元件中管理文字輸入焦點可能是一項棘手的任務。 瀏覽器focus/blur API是必不可少的，因此透過宣告性方式設定或刪除焦點純粹透過render（）往往會感到尷尬和不正確，並且需要對控制焦點狀態進行有挑戰性的嘗試。

考慮到這一點，在Facebook，我們經常選擇將focus（）方法暴露在包裝文字輸入的元件上。這打破了宣告正規化，但也簡化了工程師在其應用程式中成功管理焦點行為所需的工作。

編輯器元件遵循此模式，因此元件上可以使用public focus（）方法。 這允許您在需要時使用更高階別元件中的ref直接在元件上呼叫focus（）。

元件中的事件偵聽器將觀察到焦點更改，並按預期透過onChange傳播它們，因此state和DOM將保持正確的同步。

您的高階元件很可能會將Editor元件包裝在某種容器中，也許使用padding來設計它以匹配您的應用程式。

預設情況下，如果使用者在嘗試對編輯器進行對焦時，單擊此容器中的外部渲染的編輯器，編輯器將無法識別點選事件。 因此，建議您在容器元件上使用點選監聽器，並使用上述的focus（）方法將焦點應用於編輯器。

例如，明文編輯器示例使用此模式。