根据选择的选项有条件地显示材料UI选择（下拉）

Question

假设我们有代码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
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
  }
}));

function SuperForm() {
  const classes = useStyles();

  return (
    <div>
      <div>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="grouped-native-select">Choose Type</InputLabel>
          <Select
            native
            defaultValue=""
            input={<Input id="grouped-native-select" />}
          >
            <option value={1}>Week</option>
            <option value={2}>Plan</option>
          </Select>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="grouped-select">Number</InputLabel>
          <Select defaultValue="" input={<Input id="grouped-select" />}>
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={1}>1</MenuItem>
            <MenuItem value={2}>2</MenuItem>
            <MenuItem value={3}>3</MenuItem>
            <MenuItem value={4}>4</MenuItem>
            <MenuItem value={5}>5</MenuItem>
            <MenuItem value={6}>6</MenuItem>
            <MenuItem value={7}>7</MenuItem>
            <MenuItem value={8}>8</MenuItem>
          </Select>
        </FormControl>
      </div>    
    </div>
  );
}

export default SuperForm;

[仅当用户在第一个FormControl中选择Number时，如何才能显示Week的第二个FormControl？

[当他选择Plan时，我不希望呈现任何内容。

谢谢

Answer 1

Answer 2