reactjs - 将值更改为反应选择菜单项不会填充到反应材料-ui中

Question

以下是反应选择菜单项的代码框的 URL。

反应选择菜单项 这里我用 div 包装菜单项并更改选择下拉列表的值，但值不会在更改时填充到选择下拉列表中。如何为 onChange 事件提供运行时值以选择下拉菜单。

有人可以让我知道这个想法的解决方案吗？

谢谢

Answer 1

这是你想要的吗？

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)
  }
}));

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

  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>
  );
}

组件需要直接作为一个孩子。否则它不会填充。如果您想使用 div，那么您可以将 div 替换为片段。但我认为我们不能为片段设置样式。您需要为状态提供默认值。

链接到运行良好的代码沙箱，我认为这正是您想要的

只要让我知道这是您想要的还是我遗漏了什么。