javascript - MUI 选择带标签，但选择没有 ID

Question

我在一个组件中有一个 Material ui react 选择，该组件可能多次出现在一个页面上。

在 examples所有带标签的选择都使用带有 htmlFor 的 InputLabel，该 htmlFor 必须是选择的 id。

我不能给选择一个id，因为id对于页面来说必须是唯一的，并且这个组件不需要知道页面上的所有id(我的代码中也不需要知道所有的id) id 在页面中)。

根据InputLabel documentation它甚至没有记录的 htmlFor 属性。

是否可以在不给它 ID 的情况下标记 MUI 选择？

Answer 1

只要您的嵌套解决方案没有遇到任何样式困难，那就完全没问题，但这里有一个使用生成的 id 的示例，它可以让您避免在 InputLabel 中嵌套 Select:

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

let nextIdSuffix = 1;

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

const CustomSelect = () => {
  const idRef = React.useRef();
  const classes = useStyles();
  const [value, setValue] = React.useState("");
  if (!idRef.current) {
    idRef.current = `CustomSelect${nextIdSuffix}`;
    nextIdSuffix++;
  }
  return (
    <FormControl className={classes.formControl}>
      <InputLabel htmlFor={idRef.current}>Age</InputLabel>
      <Select
        value={value}
        onChange={e => setValue(e.target.value)}
        inputProps={{
          name: idRef.current,
          id: idRef.current
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
  );
};
export default CustomSelect;