使用箭头键浏览Material-UI列表 [英] Navigate a material-ui list with arrow keys

问题描述

我正在使用material-ui进行电子应用.有些屏幕是主从，我使用列表来显示概览.我想让使用箭头键浏览此列表成为可能.有内置选项可以做到这一点吗?

如果它不是内置的，什么是最好的方法?

更新:我现在制作了自己的组件.不知道这是否是最好的解决方案，但似乎可行:

 导出默认功能NavigateList(props){const {children，data，... other} = props;const元素= data.map((val，i)=> children(val，i));函数gotoPrevElement(){const selected = elements.findIndex(e => e.props.selected);如果(选择> 0){const el = elements [selected-1];el.props.onClick(data [selected-1]);}}函数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]);}}函数handleKey(e){如果(e.key ==="ArrowDown"){gotoNextElement();}如果(e.key ==="ArrowUp"){gotoPrevElement();}}返回 (< List onKeyDown = {handleKey} {... other}>{elements}</列表>);} 

以下是如何使用它的示例:

 < NavigateList data = {people}>{(p，i)=>(< ListItem按钮键= {i}selected = {checkIfSelected(p)}onClick = {e =>setSelected(p)}>< ListItemTextprimary = {p.primary}secondary = {p.secondary}/></ListItem>)}</NavigateList> 

解决方案

您可以使用 List 作为主界面，而 Card 作为详细界面.>

您的父组件将处理主界面中的 List 选择更改，并负责将正确的详细数据发送到 Card .

以下是使用Material-UI组件时该结构的外观示例:

  class ParentComponent扩展了React.Component {构造函数(道具){超级(道具);this.state = {currentDetailIndex:0，numOfListItems:10，detailData:[{...},{...}，...]};}changeDetailIndex =(newIndex)=>{this.setState({currentDetailIndex:newIndex});}moveUp =()=>{如果(this.state.currentDetailIndex> 0){this.setState({currentDetailIndex:this.state.currentDetailIndex-1});}}moveDown =()=>{如果(this.state.currentDetailIndex< this.state.numOfListItems-1){this.setState({currentDetailIndex:this.state.currentDetailIndex + 1});}}onKeyPressed =(e)=>{如果(e.keyCode =='38'){//向上箭头this.moveUp();}否则，如果(e.keyCode =='40'){//向下箭头this.moveDown();}}使成为() {返回 (< div><List component="nav" onKeyDown={this.onKeyPressed}>< ListItem onClick = {()=>{this.changeDetailIndex(someIndex);}}>的...</列表><卡>< CardContent>< SomeDetailComponent data = {this.state.detailData [this.state.currentDetailIndex]}/></CardContent></卡></div>);};} 

I'm using material-ui to make an electron application. Some screens are master-detail and I'm using a list to show the overview. I would like to make it possible to navigate this list with arrow keys. Is there a builtin option to do this?

If it is not built in, what is the best approach to make this?

Update: I made my own component for now. Not sure if it is the best solution, but seems to work:

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>
    );
}

Here is an example how it can be used:

<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>

解决方案

You could use a List for the master-interface and a Card for the detail-interface.

Your parent component will handle List selection changes from your master-interface and be responsible for sending the correct detail data to the Card.

Here's an example of how this structure would look like using Material-UI components:

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>
        );
    };
}

这篇关于使用箭头键浏览Material-UI列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！