0

我正在使用带有组标题的 React Widgets 组合框，但我无法使用键盘导航。

文档页面上的第一个示例有一个可通过键盘访问的下拉菜单（向上/向下箭头键），但我看不到它的源代码，并且它不使用组标题：

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

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

我已经搜索但没有找到任何示例代码，显示如何在反应小部件组合框上启用键盘可访问性。

这是我的代码：

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
/>

谁能说如何允许用户使用键盘选择下拉项目？谢谢！

4

1 回答 1

0

我想到了！我的数据数组中的两个选项对象错误地具有相同的 id。键盘导航必须通过检查 valueField 来工作，这必须是唯一的。

事后看来，这种事情似乎很明显，但是当您对某些新事物感到陌生时，很容易错过。

于 2019-10-01T18:19:40.317 回答