我有几个跨度：
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
这些项目都紧挨着另一个。我希望用户按下箭头键（向左和向右）然后在跨度中移动（在我的情况下，这将更新当前对象并调度一个动作）。
编辑：我没有任何示例代码，因为我是一个绝对的初学者。但我也不希望有人在这里发布可行的解决方案，我只是想提供一些一般性建议，我将如何在 React/Redux 中从概念上解决这个问题。
如何使用箭头键遍历 <span> s
IT技术
javascript
html
reactjs
redux
react-redux
2021-04-29 09:22:46
1个回答
这是一个简单的 JavaScript 示例：
function move(dir) {
var selectables = Array.from(document.querySelectorAll('.selectable'));
var selected = document.querySelector('.selected');
var i = selectables.indexOf(selected);
i = (i+selectables.length+dir)%selectables.length;
selected.classList.remove('selected');
selectables[i].classList.add('selected');
}
document.addEventListener('keydown', function (e) {
switch(e.which) {
case 37: return move(-1);
case 39: return move(1);
}
});.selected { background-color: yellow }<span class="selectable selected">Item 1</span>
<span class="selectable">Item 2</span>
<span class="selectable">Item 3</span>
<p>Set focus on this page and press left/right arrow keys