时间戳

首页 > 解决方案 > React - ul li 列表上的键盘导航

javascript - React - ul li 列表上的键盘导航

问题描述

我有一个带有 ul li list 的项目列表，它通过 map 函数构建，看起来像 -

sizeData.map((size, index) => {
    return (
        <li
            role="none"
            className="size-dropdownlist__item"
            key={sizeData.label}
            onMouseOver={() => this.sizeDataHover(size.price)}
            onFocus={() => this.sizeDataHover(size.price)}
        >
            <div className="size-dropdownlist__item____holder">
                <a
                    role="menuitem"
                    aria-setsize={size.length}
                    aria-posinset={index + 1}
                    tabIndex="0"
                    aria-label={size.label}
                    href={size.URL}
                    onClick={(e) => { this.onSizeDataSelect(e, size.ID); }}
                    className={
                        classNames('size-dropdownlist__item____holder--link',
                            {
                                'holder--link-selected': size.isSelected
                            })
                    }
                >
                    {size.label}
                </a>
            </div>
        </li>
    })
}

HTML 输出如 -

<ul className="size-dropdownlist">
    <li className="size-dropdownlist__item">
        <div className="size-dropdownlist__item____holder">
            <a href="#" className="size-dropdownlist__item____holder--link">A</a>
        </div>
    </li>
    <li className="size-dropdownlist__item">
        <div className="size-dropdownlist__item____holder">
            <a href="#" className="size-dropdownlist__item____holder--link">B</a>
        </div>
    </li>
    <li className="size-dropdownlist__item">
        <div className="size-dropdownlist__item____holder">
            <a href="#" className="size-dropdownlist__item____holder--link">C</a>
        </div>
    </li>
    <li className="size-dropdownlist__item">
        <div className="size-dropdownlist__item____holder">
            <a href="#" className="size-dropdownlist__item____holder--link">D</a>
        </div>
    </li>
    <li className="size-dropdownlist__item">
        <div className="size-dropdownlist__item____holder">
            <a href="#" className="size-dropdownlist__item____holder--link">E</a>
        </div>
    </li>
    <li className="size-dropdownlist__item">
        <div className="size-dropdownlist__item____holder">
            <a href="#" className="size-dropdownlist__item____holder--link">F</a>
        </div>
    </li>
</ul>

使用 CSS 我将其设置为两行，显示：flex。

|A|B|
|C|D|
|E|F|

现在我想通过键盘移动选定的项目，例如 - 如果用户将鼠标指针移动到 A 并向右按箭头，则 B 将显示已选中，如果用户按下箭头，则 C 已选中。同样，如果用户在 C 上按下向上箭头，它会移动到 A。

标签： javascripthtmlreactjs

解决方案

据我所知，您可以使用tabIndex通过 Tab 键在元素之间移动。如果你想使用自定义键——比如箭头键——你应该使用 javascript。这里有一个已经回答的问题，它使用 jQuery，但您可以很容易地将其转换为纯 javascript。

推荐阅读