外部焦点监听

withFocusOutside 是一个 React 高阶组件，用于在焦点离开元素时触发行为。由于当焦点过渡到同一上下文中的另一个元素时，React 中仍会触发 blur 事件，因此该高阶组件封装了确定焦点是否真正离开元素的必要逻辑。

用法

使用 withFocusOutside 包装原始组件，并在组件类上定义 handleFocusOutside 实例方法。

注意：withFocusOutside 仅应用于包装 Component 类。

import { withFocusOutside, TextControl } from '@wordpress/components';

const MyComponentWithFocusOutside = withFocusOutside(
    class extends React.Component {
        handleFocusOutside() {
            console.log( 'Focus outside' );
        }

        render() {
            return (
                <div>
                    <TextControl onChange={ () => {} } />
                    <TextControl onChange={ () => {} } />
                </div>
            );
        }
    }
);

在上面的示例中，仅当焦点离开元素时才会调用 handleFocusOutside 函数，而在两个输入框之间切换焦点时不会调用。