UI Material Select button, появляющийся над компонентом - PullRequest
Новая
       4

UI Material Select button, появляющийся над компонентом

0 голосов
/ 03 марта 2019

При попытке использовать компонент выбора Material UI с FormControl и InputLabel, метка выбора всегда отображается выше компонента выбора, и я не могу понять, почему.

мой код выглядит примерно так 

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

1 Ответ

0 голосов
/ 03 марта 2019

Метка будет сидеть в поле выбора, если выбранная опция имеет пустое значение;в противном случае он должен показывать выбранный элемент, а ярлык должен быть в стороне.В вашем примере у вас есть только одна опция в вашем 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);

Edit Labelled Select

...