如何使用material-ui inputBase制作选择组件？答案

【问题标题】：How to use material-ui inputBase to make select component?如何使用material-ui inputBase制作选择组件？
【发布时间】：2021-04-03 12:39:08
【问题描述】：

我想使用 InputBase 组件进行选择下拉菜单。选择框显示正确，但单击该字段时不显示下拉选项。我曾尝试过其他inputComponent 之类的输入，效果很好。

我想在字段上使用上面的标签，并且我知道我可以使用本机选择来制作它。但是，我想在这些组件之间共享相同的样式。

有人知道如何使用输入库来制作选择组件吗？

下面提供的代码：

import React from "react";
import "./styles.css";
import {
  FormControl,
  InputLabel,
  InputBase,
  MenuItem
} from "@material-ui/core";
import { withStyles, fade } from "@material-ui/core/styles";

export default function App() {
  const BootstrapInput = withStyles((theme) => ({
    root: {
      "label + &": {
        marginTop: "20px"
      }
    },
    input: {
      position: "relative",
      backgroundColor: theme.palette.common.white,
      border: "1px solid #ccc",
      fontSize: 14,
      width: "380px",
      height: "12px",
      padding: "10px 12px",
      transition: theme.transitions.create(["border-color", "box-shadow"]),
      "&:focus": {
        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
        borderColor: theme.palette.primary.main
      }
    }
  }))(InputBase);

  return (
    <div className="App">
      <FormControl>
        <InputLabel shrink htmlFor="personalTitle">
          Age
        </InputLabel>

        <BootstrapInput inputComponent="select" name="personalTitle">
          <MenuItem>20</MenuItem>
          <MenuItem>30</MenuItem>
          <MenuItem>40</MenuItem>
        </BootstrapInput>
      </FormControl>
    </div>
  );
}

CodeSandbox 链接： https://codesandbox.io/s/select-on-inputbase-0ufes?file=/src/App.js:0-1209

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用 material-ui 选择组件轻松管理选择框。您可以使用以下链接查看更多详细信息 https://material-ui.com/components/selects/

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 FormHelperText from '@material-ui/core/FormHelperText';
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),
  },
}));

export default function SimpleSelect() {
    const classes = useStyles();
    const [age, setAge] = React.useState('');

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

    return (
        <div>
            <FormControl className={classes.formControl}>
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            onChange={handleChange}
            >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
            </Select>
        </FormControl>
        </div>
    )
}

【讨论】：