出现在组件上方的 Material UI Select 按钮标签答案

【问题标题】：Material UI Select button label appearing above component出现在组件上方的 Material UI Select 按钮标签
【发布时间】：2019-07-24 16:23:43
【问题描述】：

尝试使用带有 FormControl 和 InputLabel 的 Material UI 选择组件，选择的标签总是呈现在选择组件上方，我不知道为什么。

我的代码看起来像这样

 <FormControl>
      <InputLabel htmlFor="hey">A Label</InputLabel>
      <Select inputProps={{
         id: "hey"
      }} value="Hey">
          <MenuItem value="Hey">
             Hey
          </MenuItem>
      </Select>
   </FormControl>

【问题讨论】：

你希望它做什么？这也是标签出现在Material UI demos 中的位置。
@RyanCogswell 在演示中，标签位于“选择”框中，然后在单击“选择”框时向上移动。至少在谷歌浏览器上是这样

标签： reactjs material-ui

【解决方案1】：

如果当前选择的选项为空值，则标签只会位于选择框中；否则它需要显示选定的项目，并且标签必须不碍事。在您的示例中，您的 Select 中只有一个选项，其值为“Hey”，因此它将开始被选中并显示。

这是一个示例并排显示您的示例 Select 和一个以选择的空值开头的示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  }
});

function App({ classes }) {
  const [value, setValue] = useState("");
  return (
    <>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="hey">A Label</InputLabel>
        <Select
          inputProps={{
            id: "hey"
          }}
          value="Hey"
        >
          <MenuItem value="Hey">Hey</MenuItem>
        </Select>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="hey2">A Label</InputLabel>
        <Select
          inputProps={{
            id: "hey2"
          }}
          value={value}
          onChange={event => setValue(event.target.value)}
        >
          <MenuItem value="">Empty Value for First Option</MenuItem>
          <MenuItem value="Hey">Hey</MenuItem>
        </Select>
      </FormControl>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

【讨论】：

【解决方案2】：

我在使用 material-ui v3.9.2 时遇到了这个问题。我更新到最新版本（当前为 v4.5.0）并为我修复了它。

【讨论】：