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

您的组件中有一个useState，默认值为1：

const [typeValue, setTypeValue] = React.useState("1");

然后，当用户更改select时，应按以下方式处理：

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

最后，在您组件的return中有一个三元组：

{typeValue === "1" ? (
  <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>
) : null}

这是您推荐的Working Sample Demo。

Answer 2

我们可以使用状态来实现：

import React, { useState } 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 [selectedValue, setSelectedValue] = useState("");
  const classes = useStyles();

  return (
    <div>
      <div>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="grouped-native-select">Choose Type</InputLabel>
          <Select
            native
            value={selectedValue}
            onChange={event => setSelectedValue(event.target.value)}
            defaultValue=""
            input={<Input id="grouped-native-select" />}
          >
            <option value={1}>Week</option>
            <option value={2}>Plan</option>
          </Select>
        </FormControl>
        {selectedValue === "1" && (
          <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;

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

2 个答案: