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

Question

我需要在默认值中设置一个值，无论基于用户级别下拉值中先前选择的值意味着什么，我的任务是我需要在默认选择中设置该值，因为在我时间一个值成真，所以如果用户在上一个下拉菜单中选择任何一个名称，例如在用户名下拉菜单中 dev_sams 选择所以我需要将制造商设置为直接在用户级别默认值标签将根据用户名更改，因此需要设置动态我添加了一些示例如何值和为了更好地理解标签，请参阅 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 Link

Answer 1

当我们选择用户名时，我们需要做以下事情，

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}

由于选项每次都会根据所选用户而变化，我们可以有一个状态来保存这些选项。

工作沙盒

codesandbox