Question

我可以提到UP和DOWN箭头键可以移动选择，这使我相信它已经以某种方式显示出来了。

有一个Material-ui菜单组件，该组件具有包装MenuItems组件的Gatsby Link组件。我删除了不相关的代码。

class NavBarDesktop extends React.Component {
  state = {
    anchorEl: null,
  }

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget })
  }

  handleClose = () => {
    this.setState({ anchorEl: null })
  }

  render() {        
    const { anchorEl } = this.state

    return (
      <div>
        <Button
          aria-owns={anchorEl ? 'fade-menu' : null}
          onClick={this.handleClick}
          className={classes.button}
        >
          Categories
        </Button>
        <Menu
          id="fade-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          <Link to={'accessories'}>
            <MenuItem onClick={this.handleClose}>Accessories</MenuItem>
          </Link>
          <Link to={'automotive'}>
            <MenuItem onClick={this.handleClose}>Automotive</MenuItem>
          </Link>
          <Link to={'electronics'}>
            <MenuItem onClick={this.handleClose}>Electronics</MenuItem>
          </Link>
        </Menu>
      </div>
    )
  }
}

NavBarDesktop.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(NavBarDesktop)

有人以前遇到过吗？

Answer 1

我不太了解您的问题，但是如果您希望得到 material-ui 的行为，建议您按照Third-party routing library文档中的建议编写导航按钮

我在项目中使用它：

// ./src/components/LinkMenuItem.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';

import MenuItem from '@material-ui/core/MenuItem';

const LinkMenuItem = ({ to, children, ...rest }) => (
  <MenuItem component={Link} to={to} {...rest}>
    {children}
  </MenuItem>
);

LinkMenuItem.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.string.isRequired,
};

export default LinkMenuItem;

然后在您的NavBarDesktop组件中：

import LinkMenuItem from './path/to/component';

// ...

<Menu
  id="fade-menu"
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={this.handleClose}
>
  <LinkMenuItem onClick={this.handleClose} to='/accessories'>Accessories</MenuItem>
  <LinkMenuItem onClick={this.handleClose} to='/automotive'>Automotive</MenuItem>
  <LinkMenuItem onClick={this.handleClose} to='/electronics'>Electronics</MenuItem>
</Menu>

GatsbyJS Link组件具有边框，就像它是使用TAB从键盘中选择的一样

1 个答案: