时间戳

首页 > 解决方案 > 运行 onKeyDown 函数时转到 NavLink

reactjs - 运行 onKeyDown 函数时转到 NavLink

问题描述

我有一个<NavLink />我正在努力满足可访问性标准的东西。此链接在当前页面中打开一个新组件。

我希望在按下“输入”键时访问 NavLink。

在我的 NavLink 中，我有以下 onKeyDown：

onKeyDown={() => {
    this.toggleViaEnter('1'); // '1' refers to section 1
}}

我希望它采用一个参数，即节号，以及事件，因为我只想在按键为enter时切换此部分。

这是我的功能：

toggleViaEnter(tab, event) {
  console.log('char', event.keyCode);
  if(event.keyCode === 13) {
    this.toggle(tab);
  }
}

我正在尝试注销 keyCode 以便我可以看到它是“13”，但是在我的控制台中我得到：

未捕获的类型错误：无法读取未定义的属性“keyCode”

我认为这意味着我没有将事件传递给toggleViaEnter- 我不确定如何将包括事件在内的多个参数传递给函数。

标签： reactjsaccessibilityreact-router-dom

解决方案

您没有将事件传递给toggleViaEnter. 为此，请更新onKeyDown以获取事件并通过它

onKeyDown={event => {
    this.toggleViaEnter('1', event); // '1' refers to section 1
}}

您还可以更新toggleViaEnter以返回一个像这样的函数

toggleViaEnter = tab => event => {
  console.log('char', event.keyCode);
  if(event.keyCode === 13) {
    this.toggle(tab);
  }
}

你会更新onKeyDown为

onKeyDown={this.toggleViaEnter('1')}

推荐阅读