时间戳

首页 > 解决方案 > 根据选择的选项有条件地显示材质 UI 选择（下拉）

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

问题描述

假设我们有代码：

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;

Number只有当用户在第一个 FormControl 中选择时，我们如何才能显示第二个WeekFormControl ？

当他选择时，Plan我什么都不渲染。

谢谢

标签： reactjsmaterial-uidropdown

解决方案

在您的组件中有一个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}

这是您的参考的工作示例演示。

推荐阅读