时间戳

首页 > 解决方案 > 如何在 MenuItem 中设置用户级别？

javascript - 如何在 MenuItem 中设置用户级别？

问题描述

我需要在默认值中设置一个值，无论基于用户级别下拉值中先前选择的值意味着什么，我的任务是我需要在默认选择中设置该值，因为在我时间一个值成真，所以如果用户选择任何上一个下拉列表中的一个名称，例如在用户名下拉列表 dev_sams 中选择所以我需要将 maker 设置为直接在用户级别默认值标签将根据用户名更改，因此需要设置动态我添加了一些示例值和标签是如何产生的更好的理解参见 CodeSand Box 链接

import React, { useMemo } 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: ""
    },
    // validationSchema: downloadFormSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    }
  });
  const options = useMemo(() => {
    if (userList) {
      let levelList = [];
      for (let [key, value] of Object.entries(userList)) {
        if (value === true) {
          levelList.push({ value: key, label: key });
        }
      }
      return levelList;
    }
  }, [userList]);
  React.useEffect(() => {
    if (userList) {
      downloadsForm.setFieldValue("baseStr", options[0]);
    }
  }, [options, userList]);
  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
                    id="outlined-select-currency"
                    select
                    label="User"
                    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
                      id="outlined-select-currency"
                      select
                      label="Level"
                      fullWidth
                      onChange={downloadsForm.handleChange}
                      value={downloadsForm.values.Userlevel}
                      name="Userlevel"
                      variant="outlined"
                      size="small"
                    >
                      <MenuItem value={options}>{options}</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">
                    Submit
                  </Button>
                </Box>
              </Grid>
            </CardContent>
          </form>
        </Card>
      </Grid>
    </Grid>
  );
}

CodeSandBox 链接

标签： javascriptreactjsmaterial-ui

解决方案

当我们选择用户名时，我们需要以下内容，

  1. 获取所选用户的用户级别选项
  2. 使用第一个选项预填充用户级别

我们需要有一种自定义方法，应该在选定值更改时为我们执行上述步骤。创建一个新方法handleUserNameChange，如下所示

const handleUserNameChange = (e) => {
    const selectedUser = e.target.value;

    // find the user
    const user = userList.find((user) => user.username === selectedUser);

    // iterate over the user object and generate the option list
    // containing the property which has the value true
    const newOptions = Object.keys(user).reduce((optionList, key) => {
      if (user[key] === true) {
        optionList.push({ value: key, label: key });
      }
      return optionList;
    }, []);

    // have a state to hold the options which changes based on the selected user
    setOptions(newOptions);

    // Manually update the formik state for username
    downloadsForm.setFieldValue("Username", selectedUser);

    // Manually update the formik state for userlevel by setting the
    // first option as default
    downloadsForm.setFieldValue("Userlevel", newOptions[0]?.value || "");
  };

Username现在在文本字段的 onChange 中使用此方法。

onChange={handleUserNameChange}

由于选项每次都会根据所选用户而更改，因此我们可以使用一种状态来保存这些选项。

工作沙箱

密码箱

推荐阅读