MUI выберите с меткой без выбора с идентификатором

Question

У меня есть материал, который реагирует на выбор в компоненте, который может быть на странице несколько раз.

В примерах все помеченные селекторы используют InputLabel с htmlFor, который должен быть идентификатором выбора.

Я не могу дать идентификатору select, потому что идентификатор должен быть уникальным для страницы, и это компонент, которому не нужно знать все идентификаторы на странице (и нигде в моем коде я не хочу знать обо всех идентификаторы на странице).

Согласно документации InputLabel он даже не имеет документированного свойства htmlFor.

Можно ли пометить выбор интерфейса пользователя без указания идентификатора?

Answer 1

До тех пор, пока вы не столкнетесь с какими-либо трудностями при оформлении со своим вложенным решением, это прекрасно, но вот пример использования сгенерированного идентификатора, который позволит вам избежать вложения Select в InputLabel:

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;

Answer 2

То же, что и тег html label ; Я сделал вложенный выбор в InputLabel:

<InputLabel className="paging">
  Page:
  <Select
    value={current}
    onChange={e => changePage(e.target.value)}
    inputProps={{
      name: 'page',
      id: 'page',
    }}
  >
    {options.map(option => (
      <MenuItem key={option} value={option}>
        {option}
      </MenuItem>
    ))}
  </Select>
</InputLabel>