当我在其中使用 tabIndex 时，如何通过键盘 Tab 键访问 Material UI Link 中的 onClick 操作而不使用 component="button" 或 href

Question

在我使用 tabIndex 通过键盘 tab 键获得 Material UI Link 的焦点后，当我按下 Enter 按钮时，单击操作不起作用。我不明白为什么。谁能帮我这个？谢谢。

沙盒链接：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} tabIndex={0}>
    Link
 </Link>
 <Typography>Click on above link to display hidden content..</Typography>
    {state ? "" : "focus on Link using Tab key?"}
 </Typography>
 );
 }

Answer 1

我使用onKeyPress属性通过键盘tab键实现点击动作，而不使用component="button"或href，如下所示。

function goToDetails(event, id) 
{
    if(event.key === 'Enter'){
        event.preventDefault();
    history.push(`/`);
    }
    else {
        event.preventDefault();
        history.push(`/`);
    }
}
<Link tabIndex={0} onKeyPress={(event) => goToDetails(event, row.id)}  onClick={(event) => goToDetails(event, row.id)}>
 Go to details
</Link>

Answer 2

将component 属性设置为button，如下所示：

/* 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} tabIndex={0} component="button">
        Link
      </Link>
      <Typography>Click on above link to display hidden content..</Typography>
      {state ? "" : "focus on Link using Tab key?"}
    </Typography>
  );
}