（material-ui）将max-height应用于< Select>孩子们 [英] (material-ui) Apply max-height to <Select> children

问题描述

我正在使用material-ui react库来呈现一些下拉菜单，分别使用< FormControl> ，< Select> 和< MenuItem> 组件。该下拉菜单的options数组很大，我想在下拉菜单中设置max-height，因此它不会变得很大。我目前正在努力做到这一点，如下所述。

使用material-ui的基本下拉菜单：

  const MenuValidNotes =（{{
 schedule，
 indexTrack，
 indexSchedule，
 actionSetTrackScheduleItemNote，
}）=> {
 
 const listNotesMenu =（）=> （
 ARRAY_VALID_NOTES.map（（noteObj，i）=>（
< MenuItem 
 value = {noteObj.note} 
 key = {`track-item-$ { indexTrack} -schedule-$ {indexSchedule} -note-$ {i}`} 
 onClick = {（）=> actionSetTrackScheduleItemNote（indexTrack，indexSchedule，noteObj.midiNumber）} 
> {noteObj。注意}< / MenuItem> 
））
）
 
 return（
< div> 
< FormControl> 
< InputLabel> Note< / InputLabel> 
<选择
 defaultValue = {noteValueToNoteObject（schedule.noteValue）.note} 
> 
 {listNotesMenu（）} 
< ; / Select> 
< / FormControl> 
< / div> 
）
} 
  

我发现设置最大高度的一种方法是在div中渲染< Select> 的子级，给它一个类名并对其应用一些CSS。

但是，< Select> 组件要求其子元素为< MenuItem> ; s ，因此在< div> 附近将破坏 value 属性，该属性表示它不会显示正确的值。 （在阅读

解决方案

您要控制的高度是纸张元素由菜单中的 Popover 元素呈现。

关键方面是 MenuProps = {{类：{纸张：classes.menuPaper}}} 和 menuPaper 样式的定义。

I am using the material-ui react library to render some Dropdown menus, using the <FormControl>, <Select> and <MenuItem> components. The options array for this dropdown menu is quite large, and I would like to set a max-height on the dropdown, so it does not become to large. I am currently struggling to do this, as I will explain below.

basic dropdown using material-ui:

const MenuValidNotes = ({
  schedule,
  indexTrack,
  indexSchedule,
  actionSetTrackScheduleItemNote,
}) => {

  const listNotesMenu = () => (
    ARRAY_VALID_NOTES.map((noteObj, i) => (
      <MenuItem
        value={noteObj.note}
        key={`track-item-${indexTrack}-schedule-${indexSchedule}-note-${i}`}
        onClick={() => actionSetTrackScheduleItemNote(indexTrack, indexSchedule, noteObj.midiNumber)}
      >{noteObj.note}</MenuItem>
    ))
  )

  return(
    <div>
      <FormControl>
        <InputLabel>Note</InputLabel>
        <Select
          defaultValue={noteValueToNoteObject(schedule.noteValue).note}
        >
          {listNotesMenu()}
        </Select>
      </FormControl>
    </div>  
  )
}

One way I found to set the max-height is to render the children of <Select> in a div, give it a classname and apply some CSS to it.

However, the <Select> component requires that its children are <MenuItem>s, so having a <div> around will break value attribute, which means it would not display the correct value. (found this while reading Material-UI Select e.target.value is undefined)

  const listNotesMenu = () => (
    ARRAY_VALID_NOTES.map((noteObj, i) => (
      <div className="..."> // this div will break the 'value' of the Select component 
         <MenuItem ... />
      </div>
    ))
  )

so, ideally, I would like to be able to control both the value and the max-height of its children. Is this possible at all? The material-ui docs on select have no such example, and the props list of the <Select component does not include any fields to control the height. Thank you for your help.

(The screenshots above displays this issue. one screenshot shows that it is possible to control the max-height using a div wrapper, but that breaks the value; the other shows the dropdown without the div wrapper, which means we can't set max-heigh).

解决方案

The height that you want to control is the Paper element rendered by the Popover element within Menu.

The default styles are maxHeight: 'calc(100% - 96px)'.

Below is one example of how to override this:

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";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  menuPaper: {
    maxHeight: 100
  }
}));

const VALID_NOTES = [
  "C",
  "C#",
  "D",
  "D#",
  "E",
  "F",
  "F#",
  "G",
  "G#",
  "A",
  "A#",
  "B"
];
export default function SimpleSelect() {
  const classes = useStyles();
  const [note, setNote] = React.useState("");

  const handleChange = event => {
    setNote(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Note</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={note}
          onChange={handleChange}
          MenuProps={{ classes: { paper: classes.menuPaper } }}
        >
          {VALID_NOTES.map(validNote => (
            <MenuItem value={validNote}>{validNote}</MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

The key aspect being MenuProps={{ classes: { paper: classes.menuPaper } }} and the definition of the menuPaper styles.

这篇关于（material-ui）将max-height应用于< Select>孩子们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！