我正在使用material-ui 来制作电子应用程序。有些屏幕是主从结构,我使用列表来显示概述。我希望能够使用箭头键浏览此列表。有内置选项可以执行此操作吗?
如果它不是内置的,那么最好的方法是什么?
Update:我现在制作了自己的组件。不确定这是否是最好的解决方案,但似乎有效:
export default function NavigateList(props) {
const { children, data, ...other } = props;
const elements = data.map((val, i) => children(val, i));
function gotoPrevElement() {
const selected = elements.findIndex(e => e.props.selected);
if (selected > 0) {
const el = elements[selected - 1];
el.props.onClick(data[selected - 1]);
}
}
function gotoNextElement() {
const selected = elements.findIndex(e => e.props.selected);
if (selected > -1 && selected < elements.length - 1) {
const el = elements[selected + 1];
el.props.onClick(data[selected + 1]);
}
}
function handleKey(e) {
if (e.key === "ArrowDown") {
gotoNextElement();
}
if (e.key === "ArrowUp") {
gotoPrevElement();
}
}
return (
<List onKeyDown={handleKey} {...other}>
{elements}
</List>
);
}
以下是如何使用它的示例:
<NavigateList data={people}>
{(p, i) => (
<ListItem
button
key={i}
selected={checkIfSelected(p)}
onClick={e => setSelected(p)}
>
<ListItemText
primary={p.primary}
secondary={p.secondary}
/>
</ListItem>
)}
</NavigateList>
你可以使用List https://material-ui.com/demos/lists/对于主接口和Card https://material-ui.com/demos/cards/对于详细信息界面。
您的父组件将处理List
从主界面更改选择并负责将正确的详细数据发送到Card
.
以下是使用 Material-UI 组件时此结构的外观示例:
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
currentDetailIndex: 0,
numOfListItems: 10,
detailData: [
{...},
{...},
...
]
};
}
changeDetailIndex = (newIndex) => {
this.setState({ currentDetailIndex: newIndex });
}
moveUp = () => {
if (this.state.currentDetailIndex > 0) {
this.setState({ currentDetailIndex: this.state.currentDetailIndex - 1 });
}
}
moveDown = () => {
if (this.state.currentDetailIndex < this.state.numOfListItems - 1) {
this.setState({ currentDetailIndex: this.state.currentDetailIndex + 1 });
}
}
onKeyPressed = (e) => {
if (e.keyCode == '38') {
// up arrow
this.moveUp();
}
else if (e.keyCode == '40') {
// down arrow
this.moveDown();
}
}
render() {
return (
<div>
<List component="nav" onKeyDown={this.onKeyPressed}>
<ListItem onClick={() => { this.changeDetailIndex(someIndex); }}>'s...
</List>
<Card>
<CardContent>
<SomeDetailComponent data={this.state.detailData[this.state.currentDetailIndex]} />
</CardContent>
</Card>
</div>
);
};
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)