react 无障碍【hooks】

官网有个class 版本的。考虑要的整成函数的随手写了一个

function BlurExample() {
    let [isOpen, setOpen] = React.useState(false);

    let timeOutId = null;

    const onClickHandler = () => {
        setOpen(isOpen => !isOpen)
    }
    const onBlurHandler = () => {
        timeOutId = setTimeout(() => {
            setOpen(false)
        });
    }

    // 如果一个子节点获得了焦点，不要关闭弹窗。
    const onFocusHandler = () => {
        clearTimeout(timeOutId);
    }

    return (
        <div onBlur={onBlurHandler}
             onFocus={onFocusHandler}>
            <button onClick={onClickHandler}
                    aria-haspopup="true"
                    aria-expanded={isOpen}>
                Select an option
            </button>
            {isOpen && (
                <ul>
                    <li>Option 1</li>
                    <li>Option 2</li>
                    <li>Option 3</li>
                </ul>
            )}
        </div>
    );
}