Блог

Мне нужно установить значение по умолчанию независимо от того, какое значение будет иметь значение на основе предыдущего выбора в раскрывающемся списке уровня пользователя, так что моя задача состоит в том, чтобы установить это значение по умолчанию, выбранное, потому что в то время, когда одно значение сбывается, поэтому, если пользователь выберет какое-либо одно имя в предыдущем раскрывающемся списке, например, в раскрывающемся списке Имя пользователя, выберите dev_sams, поэтому мне нужно установить создателя для направления в значение по умолчанию на уровне пользователя, метка изменится в соответствии с именем пользователя, поэтому необходимо установить динамический Я добавил пример того, как значение и метка приходят для лучшего понимания см. Ссылку на Код и поле

 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 amp;amp; (
                  <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

Когда мы выбираем имя пользователя, нам нужно выполнить следующие действия,

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={handleUserNameChange}
 

Поскольку параметры каждый раз меняются в зависимости от выбранного пользователя, у нас может быть одно состояние для хранения этих параметров .

Рабочая песочница

codesandbox