Blueprintjs选择键盘导航不起作用 - 反应答案

【问题标题】：Blueprintjs Select keyboard navigation not working - ReactBlueprintjs选择键盘导航不起作用 - 反应
【发布时间】：2020-04-15 00:25:36
【问题描述】：

我有一个 blueprintjs 选择组件，我想知道如何在组件上启用键盘导航。我遵循了他们的文档，但无法更好地理解它。 itemRendered 修饰符道具有问题吗？请指教。

下面是我使用 blueprintjs select 实现的链接：

Stackblitz

非常感谢任何帮助。

【问题讨论】：

标签： reactjs select accessibility blueprintjs

【解决方案1】：

您只需连接 onActiveItemChange 以更新您在 Select as so 上用于 activeItem 的值：

<CountrySelect
  items={countryCodes || []}
  onItemSelect={handleItemSelect}
  activeItem={selectedCountry}
  onActiveItemChange={setSelectedCountry}
  {...CountrySelectProps}
  noResults={<MenuItem disabled={true} text="No results." />}
>

【讨论】：

【解决方案2】：

无需实现onActiveItemChange

根据此处的文档： https://blueprintjs.com/docs/#select/multi-select

示例： https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx

确保您设置的项目渲染器active={modifiers.active}:

 private renderFilm: ItemRenderer<IFilm> = (film, { modifiers, handleClick }) => {
        if (!modifiers.matchesPredicate) {
            return null;
        }
        return (
            <MenuItem
                active={modifiers.active}

【讨论】：