reactjs - 如何使用键盘 Tab 键关注 Material UI 链接(不使用组件 ="button")

Question

我不明白如何使用键盘中的 Tab 键专注于 Material UI Link。我将 Link 放在 Button 中以完成工作。但是有什么方法可以仅使用 Link.我正在删除代码和框链接以获取完整详细信息。提前致谢。
沙盒链接:https://codesandbox.io/s/material-demo-forked-4evbh?file=/demo.tsx
沙箱中的代码:

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Link from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > * + *": {
        marginLeft: theme.spacing(2)
      }
    }
  })
);

export default function Links() {
  const classes = useStyles();

  const [state, setState] = React.useState(true);

  const handleClick = () => {
    setState(!state);
  };

  return (
    <Typography className={classes.root}>
      <Link onClick={handleClick}>Link</Link>
      <Typography>Click on above link to display hidden content..</Typography>
      {state ? "" : "focus on Link using Tab key?"}
    </Typography>
  );
}

Answer 1

使用全局tabindex属性

<Typography className={classes.root}>
  <Link onClick={handleClick} tabIndex={0}>
    Link
  </Link>
  <Typography>Click on above link to display hidden content..</Typography>
  {state ? "" : "focus on Link using Tab key?"}
</Typography>