Открыть Выбрать после нажатия на ярлык

Question

Я ищу способ открыть компонент Select (не собственный) из пользовательского интерфейса материала после нажатия на ярлык с указанным htmlFor.

<label htmlFor='menu'>Label to open Menu</label>

<MUISelect inputProps={{id: 'menu'}} native={false}>{options}</MUISelect>

Очевидно, что он не работает

Answer 1

Эта проблема имеет два основных аспекта:

1. Вам нужно получить id для того же элемента, который имеет обработчик кликов для открытия меню.
2. Элемент с обработчиком щелчка - div, а не input. Метки не вызывают автоматически событие щелчка помеченного элемента, когда он не является элементом ввода.

Первый аспект можно решить с помощью SelectDisplayProps:

SelectDisplayProps={{ id: "menu" }}

Второй аспект можно решить с помощью пользовательского компонента метки:

import React from "react";

const LabelForClickableDiv = ({ htmlFor, ...other }) => {
  const onClick = () => {
    document.getElementById(htmlFor).click();
  };
  return <label htmlFor={htmlFor} onClick={onClick} {...other} />;
};
export default LabelForClickableDiv;

Вот рабочий пример:

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

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

function SimpleSelect() {
  const classes = useStyles();
  const [value, setValue] = React.useState("");

  return (
    <>
      <form className={classes.root} autoComplete="off">
        <FormControl className={classes.formControl}>
          <LabelForClickableDiv htmlFor="menu">
            Label to open Menu
          </LabelForClickableDiv>
          <Select
            value={value}
            onChange={event => {
              setValue(event.target.value);
            }}
            SelectDisplayProps={{
              id: "menu"
            }}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </form>
    </>
  );
}

export default SimpleSelect;