如何在默认的 react-select 中设置值

Question

我需要在默认值中设置一个值，无论基于先前选择的值意味着什么，这个选择下拉值都会出现，所以我的任务是我需要在默认选择中设置该值，因为在我时间一个值出现所以如果用户选择玛丽名称上一个下拉列表，例如在这个下拉列表中 checker1 来了，所以我需要将 checker1 设置为默认直接这个标签会根据用户名改变，所以需要设置动态我添加了一些例子，vale 和 label 是如何来的

这样价值就来了

{value: "checker1", label: "checker1"}

const [userlevel, setUserlevel] = React.useState(null);

const levelfunction = () => {
    let levelList = [];
    for (let [key, value] of Object.entries(index)) {
      if (value === true) {
        levelList.push({ value: key, label: key });
      }
    }
    return levelList;
  };
  const handlechange = (object, action) => {
    let name = action.name;
    let value = object.value;
    setUserlevel({ value: value, label: value });
  };

              <Grid item xs={3} className={classes.formGrid}>
                    {index !== null && (
                      <Select
                        className="drop-down"
                        options={levelfunction()}
                        name="level"
                        value={userlevel}
                        onChange={handlechange}
                        placeholder="Role"
                        theme={(theme) => ({
                          ...theme,
                          colors: {
                            ...theme.colors,
                            text: "white",
                            primary25: "#d6fdf7",
                            primary: "#0bb7a7",
                            primary50: "#d6fdf7",
                          },
                        })}
                      ></Select>
                    )}
                  </Grid>

参考代码沙箱CodeSandbox 链接

Answer 1

您可以在计算 levelList 后设置默认值，如果未分配则设置选项，如下代码

import "./styles.css";
import React, { useEffect ,useMemo } from "react";
import Select from "react-select";
import { Grid, Box, makeStyles, Typography } from "@material-ui/core";

const initialState = {
  screen: { value: "InitialScreening", label: "Initial Screening" },
  level: "",
  user: "",
};
const useStyles = makeStyles((theme) => ({
  formGrid: {
    padding: theme.spacing(2),
  },
  tableContainer: {
    maxHeight: 440,
  },
  btnColor: {
    backgroundColor: "#0bb7a7",
    color: "#fff",
  },
}));
const userData = [{"username":"Aaron_Stepp","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Daniel_Chancellor","maker":false,"checker1":false,"checker2":true,"checker3":false,"checker4":false,"checker5":false},{"username":"dev_sams","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"dev_sams3","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":true},{"username":"dev_sams5","maker":false,"checker1":false,"checker2":false,"checker3":true,"checker4":false,"checker5":false},{"username":"Donald_Smith","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":true,"checker5":false},{"username":"Gerald_Middlebrooks","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"kff22450@eoopy.com","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Laurel_Guerrero","maker":false,"checker1":false,"checker2":false,"checker3":true,"checker4":false,"checker5":false},{"username":"maker2","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"maker3","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":true},{"username":"Marlin_Gayle","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Mary_Aiello","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Mary_Hillin","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Megan_Collins","maker":false,"checker1":false,"checker2":true,"checker3":false,"checker4":false,"checker5":false},{"username":"Michael_Cruz","maker":false,"checker1":false,"checker2":true,"checker3":false,"checker4":false,"checker5":false},{"username":"Michael_Principe","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":true,"checker5":false},{"username":"Oliver_Rokus","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"Roland_Lenz","maker":false,"checker1":false,"checker2":false,"checker3":true,"checker4":false,"checker5":false},{"username":"Ruth_Voves","maker":false,"checker1":false,"checker2":false,"checker3":false,"checker4":true,"checker5":false},{"username":"Tyler_Martindale","maker":false,"checker1":true,"checker2":false,"checker3":false,"checker4":false,"checker5":false},{"username":"yejlhnqzcdeahwzcpi@upived.online","maker":true,"checker1":false,"checker2":false,"checker3":false,"checker4":false,"checker5":false}]

export default function App() {
  const classes = useStyles();
  const [data, setData] = React.useState(userData);
  const [DashboardPageStatus, setDashboardPageStatus] = React.useState("");
  const [index, setIndex] = React.useState(null);
  const [userlevel, setUserlevel] = React.useState({});
  const [formData, setFormData] = React.useState(initialState);
  const { screen, level } = formData;
  const [value, setValue]= React.useState('')

   const handleSelectChangeL = (object, action,selected) => {
    setIndex(data[object.id]);
    setUserlevel(null);
    setValue(selected);
  };
  const options = useMemo(()=>{
    if(index){
      let levelList = [];
      for (let [key, value] of Object.entries(index)) {
        if (value === true) {
          levelList.push({ value: key, label: key });
        }
      }
      return levelList;
    }
   
  },[index])

  useEffect(()=>{
    if(index){
      setUserlevel(options[0])
    }
  },[options,index])

 
  const handlechange = (object, action) => {
    let name = action.name;
    let value = object.value;
    setUserlevel({ value: value, label: value });
  };


  return (
    <div className="App">
       <Grid item xs={12} sm={6} md={3} className={classes.formGrid}>
                    <Select
                      className="drop-down"
                      options={data?.map((data, index) => ({
                        value: data.username,
                        label: data.username,
                        id: index,
                      }))}
                      name="user"
                      value={value}
                      onChange={handleSelectChangeL}
                      placeholder="Analyst Name"
                      theme={(theme) => ({
                        ...theme,
                        colors: {
                          ...theme.colors,
                          text: "black",
                          primary25: "#d6fdf7",
                          primary: "#0bb7a7",
                          primary50: "#d6fdf7",
                        },
                      })}
                    ></Select>
                  </Grid>
                  <Grid item xs={12} sm={6} md={3} className={classes.formGrid}>
                    {index !== null && (
                      <Select
                        className="drop-down"
                        options={options}
                        name="level"
                        value={userlevel}
                        // defaultValue={{ label: userlevel, value: userlevel }}
                        onChange={handlechange}
                        placeholder="Role"
                        theme={(theme) => ({
                          ...theme,
                          colors: {
                            ...theme.colors,
                            text: "white",
                            primary25: "#d6fdf7",
                            primary: "#0bb7a7",
                            primary50: "#d6fdf7",
                          },
                        })}
                      ></Select>
                    )}
                  </Grid>
    </div>
  );
}

您可以参考下面的代码沙箱以获取 ref