带焦点返回

带FocusReturn是一个高阶组件，通常用于短寿命元素（模态、下拉列表）的场景中，在卸载元素时，焦点应恢复到启动渲染的聚焦元素。

用法

带FocusReturn

从'react'导入{useState}；从“@wordpress/components”导入｛withFocusReturn、TextControl、Button｝；const增强组件=带FocusReturn（（）=>(<div>卸载此组件时，焦点将返回到上一个输入<TextControl自动聚焦={true}onChange={（）=>{}}/></div>) );const MyComponentWithFocusReturn=（）=>{const[text，setText]=使用状态（“”）；const卸载=（）=>{document.activeElement.blur（）；setText（“”）；};返回(<div><文本控件placeholder=“键入内容”值={text}onChange=｛（value）=>setText（value）｝/>{text&&<增强组件/>}{文本&&(<Button variant=“secondary”onClick={unmount}>卸载</按钮>) }</div>);}

带FocusReturn可以选择调用为高阶函数创建者。如果提供了options对象，则返回一个新的高阶函数。

目前支持以下选项：

onFocusReturn（聚焦返回）

一个可选函数，允许开发人员自定义焦点返回行为。返回值为假应该从此函数返回，以指示应跳过默认的焦点返回行为。

• 类型：功能
• 必需：否

例子：

函数MyComponent（）{返回<textarea/>；}const EnhancedMyComponent=带有FocusReturn（{焦点返回（）{document.getElementById（'其他输入'）.focus（）；返回false；},}）（我的组件）；