如何使用 tab 键在 Material-UI 上选择一个项目？答案

【问题标题】：How can I use the tab key to choose an item on Material-UI?如何使用 tab 键在 Material-UI 上选择一个项目？
【发布时间】：2019-10-17 19:32:48
【问题描述】：

我正在使用组件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>
))}

【问题讨论】：

你需要展示更多的代码。您是在Select 或Menu 中使用它吗？
我正在使用TextField 组件，传递参数select。
您要选择菜单项，还是将其聚焦并按 Tab 键导航？

标签： reactjs material-ui

【解决方案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>
  );
}

【讨论】：

【解决方案2】：

或者你可以只在菜单项上使用 onKeyDown 属性。因为你已经在做一个 .map 你可以访问项目 id 或任何你需要的东西。

【讨论】：