滚动浏览文本输入和列表 <li> 没有jQuery的键盘上/下键的项目？
[英]Scroll through a text input and list of <li> items with keyboard up/down keys without jQuery?
问题描述
我想使用向上和向下箭头键从搜索框中滚动浏览该列表。 我正在使用ReactJS和React Hotkeys处理事件监听器，但是我不确定实际处理列表迭代的最佳方法是什么。
我想避免使用tabIndex，因为我希望列表和整个搜索框的整个元素只有一个tabIndex。 做到这一点的最佳方法是什么？ 首选ES6，但任何解决方案都可以。 我不知道该如何处理。
您可以提供的任何建议将不胜感激！ 谢谢你的时间。
1 个解决方案
解决方案1
0 2016-10-30 02:23:24
我相信其他人会写出更长，更准确的答案，但这是一个简短的答案，希望可以帮助您解决它-
您可以在按下向上/向下箭头键时增加/减少的组件state上跟踪selected （数字）值。
状态更新将触发组件重新呈现，并且您可以将selected类应用于索引与selectedIndex匹配的项目
Jquery通过上/下箭头键盘增加/减少输入文本中的数字
[英]Jquery increase/decrease number in input text by up/down arrows keyboard
使用Javascript（jQuery）使用箭头键（上下）选择li元素
[英]Select li element with arrow keys (up and down) using Javascript (jQuery)
React：如何在不触发滚动条上下移动的情况下通过箭头键浏览表格中的列表？
[英]React: How to navigate through list in a table by arrow keys without triggering the scrollbar moving up and down?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.