如何在React Material UI的MenuItem中设置动态用户等级默认选中值

需求描述 #

• 基于*用户名（Username）下拉框的选中结果，为用户等级（Userlevel）*下拉框设置动态默认值
• 每个用户同一时间仅存在一个生效的等级属性（maker/checker1~checker5），选定用户名后即可将对应的生效等级设为Userlevel下拉框的默认选中项
• 示例场景：用户在用户名下拉框选中dev_sams时，用户等级下拉框直接默认选中maker，Userlevel的选项标签也会跟随选中的用户名动态变化

修正后可运行代码 #

import React, { useMemo, useEffect } from "react";
import {
  Grid,
  Card,
  CardContent,
  Button,
  Box,
  TextField,
  MenuItem,
  makeStyles
} from "@material-ui/core";
import { useFormik } from "formik";

const useStyles = makeStyles((theme) => ({
  formGrid: {
    padding: theme.spacing(2)
  },
  tableContainer: {
    maxHeight: 440
  }
}));

const userList = [
  {
    username: "aabcd@email.com",
    maker: true,
    checker1: false,
    checker2: false,
    checker3: false,
    checker4: false,
    checker5: false
  },
  {
    username: "aabc@email.com",
    maker: true,
    checker1: false,
    checker2: false,
    checker3: false,
    checker4: false,
    checker5: false
  },
  {
    username: "aabcssd@email.com",
    maker: false,
    checker1: true,
    checker2: false,
    checker3: false,
    checker4: false,
    checker5: false
  },
  {
    username: "dev_sams",
    maker: true,
    checker1: false,
    checker2: false,
    checker3: false,
    checker4: false,
    checker5: false
  }
];

export default function Downloads() {
  const classes = useStyles();

  const downloadsForm = useFormik({
    initialValues: {
      Username: "",
      Userlevel: ""
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    }
  });

  // 根据选中的用户名获取对应用户的等级选项
  const levelOptions = useMemo(() => {
    const selectedUser = userList.find(user => user.username === downloadsForm.values.Username);
    if (!selectedUser) return [];
    const levelList = [];
    // 遍历用户属性筛选出生效的等级
    Object.entries(selectedUser).forEach(([key, value]) => {
      if (key !== 'username' && value === true) {
        levelList.push({ value: key, label: key });
      }
    });
    return levelList;
  }, [downloadsForm.values.Username]);

  // 等级选项变化时自动设置默认选中值
  useEffect(() => {
    if (levelOptions.length > 0) {
      downloadsForm.setFieldValue("Userlevel", levelOptions[0].value);
    } else {
      // 未选中用户时清空等级值
      downloadsForm.setFieldValue("Userlevel", "");
    }
  }, [levelOptions, downloadsForm]);

  return (
    <Grid>
      <Grid item xs={12}>
        <Card color="primary" variant="outlined">
          <form onSubmit={downloadsForm.handleSubmit}>
            <CardContent>
              <Grid xs={12} item container>
                <Grid item xs={6} className={classes.formGrid}>
                  <TextField
                    select
                    label="用户"
                    fullWidth
                    onChange={downloadsForm.handleChange}
                    value={downloadsForm.values.Username}
                    name="Username"
                    error={!!downloadsForm.errors.Username}
                    helperText={downloadsForm.errors.Username}
                    variant="outlined"
                    size="small"
                  >
                    {userList?.map((opt) => (
                      <MenuItem key={opt.username} value={opt.username}>
                        {opt.username}
                      </MenuItem>
                    ))}
                  </TextField>
                </Grid>
                {downloadsForm.values.Username && (
                  <Grid item xs={6} className={classes.formGrid}>
                    <TextField
                      select
                      label="用户等级"
                      fullWidth
                      onChange={downloadsForm.handleChange}
                      value={downloadsForm.values.Userlevel}
                      name="Userlevel"
                      variant="outlined"
                      size="small"
                    >
                      {levelOptions.map(option => (
                        <MenuItem key={option.value} value={option.value}>
                          {option.label}
                        </MenuItem>
                      ))}
                    </TextField>
                  </Grid>
                )}
              </Grid>
              <Grid xs={12} item className={classes.formGrid}>
                <Box
                  display="flex"
                  alignItems="flex-end"
                  flexDirection="column"
                >
                  <Button variant="contained" color="primary" type="submit">
                    提交
                  </Button>
                </Box>
              </Grid>
            </CardContent>
          </form>
        </Card>
      </Grid>
    </Grid>
  );
}

核心改动说明 #

• 调整levelOptions的依赖为选中的用户名，动态筛选对应用户的生效等级
• 修正useEffect的逻辑，等级选项更新时自动设置Userlevel的默认值，未选中用户时清空等级
• 修复用户等级下拉框的渲染逻辑，遍历等级列表生成对应MenuItem

内容的提问来源于stack exchange，提问作者user12302978