首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react-widgets组合框中的键盘可访问性

react-widgets组合框中的键盘可访问性
EN

Stack Overflow用户
提问于 2019-10-01 16:06:49
回答 1查看 33关注 0票数 0

我正在使用带有Group Headings的React窗口小部件组合框,但无法使用键盘导航。

文档页面上的第一个示例有一个键盘可访问的下拉列表(向上/向下箭头键),但我看不到它的源代码,并且它没有使用组标题:

https://jquense.github.io/react-widgets/api/Combobox/

该页面上显示源代码的后面的示例不能通过键盘访问。

我搜索了一下,但没有找到任何示例代码来说明如何在react小部件组合框中启用键盘可访问性。

下面是我的代码:

代码语言:javascript
运行
复制
const GroupHeading = ({ item }) => {
    switch (item) {
        case 'group 1':
            return <span>Group 1</span>;

        case 'group 2':
            return <span>Group 2</span>;

        default:
            return null;
    }
};

const ComboboxItem = ({ item }) => {
    return (
        <span className="combobox-dropdown">
            <span className="item">{item.name}</span>
        </span>
    );

<Combobox
    name={widgetId}
    id={widgetId}
    data={data}
    defaultValue={defaultValue}
    minLength={2}
    filter="contains"
    groupComponent={GroupHeading}
    groupBy={item => item.type}
    valueField="id"
    textField="name"
    itemComponent={ComboboxItem}
    placeholder="Enter search text"
    onChange={param => onChange(param, widgetId)}
    onSelect={param => onSelect(param, widgetId)}
    inputProps={inputProps}
    autoFocus
/>

有人能说出如何让用户用键盘选择下拉菜单吗?谢谢!

EN

回答 1

Stack Overflow用户

发布于 2019-10-02 02:19:40

我想通了!我的数据数组中的两个option对象错误地具有相同的id。键盘导航必须通过检查valueField来工作,并且这必须是唯一的。

这类事情在事后看来是显而易见的,但当你遇到新事物时,很容易被忽略。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58180519

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档