我有一个React组件,它在用户输入搜索栏时显示“自动完成”建议列表。我正在尝试允许用户使用箭头键和回车键来浏览列表。
当用户第一次按下向下键时,焦点变量增加一,并且HTML焦点转到第一个推荐项。如果他们再次按下它,则焦点变量再次增加一,HTML焦点移动到第二个推荐项,以此类推。同样地,当用户按下向上键时,它会将焦点减少一并将HTML焦点移动到上一个建议。此外,还有措施确保焦点索引不会超出可能的范围,并在搜索栏的值更改时将焦点索引重置为零。
我遇到了这个奇怪的错误,即在覆盖焦点索引值时,仅在使用向下键时才能正常运行,然后当我按向上键时,它将更改为覆盖之前的上一个值。在某些情况下,这可能导致焦点索引超出范围,然后崩溃,因为当您输入更长的搜索时,它会缩小推荐列表。
以下是仅搜索一个字母时控制台输出焦点索引的屏幕截图: 现在我将展示当我缩小搜索范围并导航推荐时会发生什么:
我遇到了这个奇怪的错误,即在覆盖焦点索引值时,仅在使用向下键时才能正常运行,然后当我按向上键时,它将更改为覆盖之前的上一个值。在某些情况下,这可能导致焦点索引超出范围,然后崩溃,因为当您输入更长的搜索时,它会缩小推荐列表。
以下是仅搜索一个字母时控制台输出焦点索引的屏幕截图: 现在我将展示当我缩小搜索范围并导航推荐时会发生什么:
这里是一个可用的 CodeSandbox 链接:
https://codesandbox.io/s/jolly-tu-7itsm?fontsize=14&hidenavigation=1&theme=dark
let focus = -1;
,所以如果任何事情导致组件重新渲染,比如父组件重新渲染,那么focus
就会被设回-1
。也许实际上没有任何东西触发了您的组件重新渲染,但是您不应该指望这一点。 - Drew Reese