时间戳

首页 > 解决方案 > 如何使用material-ui inputBase制作选择组件？

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

问题描述

我想使用 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

标签： reactjsmaterial-ui

解决方案

您可以使用 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>
    )
}

推荐阅读