reactjs - 如何使下拉菜单可用于上下键盘箭头键并使用反应输入键?
问题描述
我是编程新手,我想实现一个下拉菜单,可以使用向上或向下箭头导航并输入键盘键。
我想做什么?我有一个下拉组件,其中列出了从父组件传递给它的项目。目前它通过鼠标单击在下拉菜单中选择项目。我希望它也可以与向上和向下箭头键和输入键一起使用。
我试图做什么?下面的代码片段适用于鼠标点击。
class Parent extends React.PureComponent {
state = {
input_val: '',
}
handle_item_select = (val) => {
this.setState({input_val: val});
}
handle_input_change = (e) => {
this.setState({input_val: e.target.value;
}
render = () => {
return (
<input
on_change={this.handle_input_change}/>
<DropDown
on_change={this.handle_item_select}
values={this.state.items}/>
)
}
}
class DropDown extends React.PureComponent {
handle_item_select = (value) => {
this.props.on_change(value);
};
render() {
return (
<div>
{this.props.values.map((value, index) =>
<Item
key={index}
value={value}
on_select={this.handle_item_select}
/>)}
</div>
);
}
}
class Item extends React.PureComponent {
handle_item_select = e => {
e.stopPropagation();
this.props.on_select(this.props.value);
};
render = () => {
return (
<div onClick={this.handle_item_select}>
{this.props.value.name}
</div>
);
}
}
有人可以帮我解决这个问题。如何使用向上/向下箭头键浏览下拉项目并输入键。
谢谢。
解决方案
你可以试试这样的
const myTextInput = props => {
const [list, setList] = useState(
[{name: 'London', id: 1},
{name: 'usa', id: 2},
]);
const [active, setActive] = useState(0);
const keyDownHandler = event => {
if (event.keyCode === 38 && active > 0) {
setActive(active - 1);
} else if (event.keyCode === 40 && event < list.length - 1) {
setActive(active + 1);
}
};
return (
<div>
<input onKeyDown={keyDownHandler} />
<ul>
{list.map((city, i) => (
<li key={city.id} className={active === i ? 'active' : 'no-active'}>
{city.name}
</li>
))}
</ul>
</div>
);
};
推荐阅读
- javascript - 为 html 中的两个单选按钮分配不同的操作
- .net-traceprocessing - TraceProcessing 库与 PerfView 使用的 TraceEvent 库相比如何?
- r - 在 R 的 sqldf 中使用 UPDATE 语句
- apache-spark - 如果对中间结果应用两个不同的转换,火花是否会重新计算中间结果?
- wpf - DataContext Set 后的 DataTemplate 选择器
- r - 如何在数据框中的两列上使用 seq 函数?
- javascript - 使用javascript向html表添加新列
- reactjs - 如何修复 npm start “无法确定原生 SDK 版本”错误?
- python-3.x - 基于来自不同数据框的条件的新数据框列
- c# - 如何使用 ASP.NET Core 3.1 调整 IFormFile 的大小