如何使用 Tab 键选择 Material-UI 上的项目？

Question

我正在使用组件MenuItem (material-UI)，当用户按下“tab”键时，我试图选择一个项目，如下所示：

{Object.keys(Countries).map(key => (
   <MenuItem key={key} value={Countries[key]} onKeyDown={(ev) => {                  
      if(ev.key === 'Tab') {
       //How can I choose the selected item with tab key?
      }
     }}>
     {Countries[key]}
    </MenuItem>
))}

Answer 1

您需要菜单项才能访问 Select 的更改处理程序。 当出现Tab时，它应该以与单击时类似的方式将菜单项的value发送到更改处理程序——通过event.target.value 。

下面是一个工作示例：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200
  },
  dense: {
    marginTop: 19
  },
  menu: {
    width: 200
  }
}));

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "฿"
  },
  {
    value: "JPY",
    label: "¥"
  }
];
const SelectOnTabMenuItem = React.forwardRef(
  ({ "data-value": valueForEvent, value, onChange, ...other }, ref) => {
    const handleKeyDown = event => {
      if (event.key === "Tab") {
        event.persist();
        // Getting the value from the "data-value" prop is necessary
        // due to the manner in which Material-UI clones the MenuItem during
        // display of the Select: https://github.com/mui-org/material-ui/blob/v4.5.1/packages/material-ui/src/Select/SelectInput.js#L226
        event.target = { value: valueForEvent };
        onChange(event);
      }
    };
    return (
      <MenuItem ref={ref} value={value} onKeyDown={handleKeyDown} {...other} />
    );
  }
);

export default function TextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    currency: currencies[0]
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };
  const currencyHandleChange = handleChange("currency");
  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="standard-select-currency"
        select
        label="Select"
        className={classes.textField}
        value={values.currency}
        onChange={currencyHandleChange}
        SelectProps={{
          MenuProps: {
            className: classes.menu
          },
          renderValue: option => option.label
        }}
        helperText="Please select your currency"
        margin="normal"
      >
        {currencies.map(option => (
          <SelectOnTabMenuItem
            onChange={currencyHandleChange}
            key={option.value}
            value={option}
          >
            {option.label} ({option.value})
          </SelectOnTabMenuItem>
        ))}
      </TextField>
    </form>
  );
}