Javascript 如何在默认输入值中设置对象列表

需要像您在图像中看到的那样设置默认值，如果用户想要删除默认值或只选择一个，他现在可以这样做，但没有设置为默认值用户需要逐个选择该列表对象，但我需要设置默认值it对象列表您可以看到列表类型是存储在对象中如何设置此所有对象在默认设置后，我在下拉列表中默认设置如下值={listType}，但当我尝试更改或删除它时，它不会更改

const changeList = (e) => {
    console.log("List s is.....", ListS);
    console.log("e here is", e);

    if (e.selected.find(({ value }) => value === "Sanctions")) {
      setListS((prev_state) => ({
        ...prev_state,
        Sanctions: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        Sanctions: false,
      }));
      setSearchType({ value: "individual", label: "individual" });
    }

    if (e.selected.find(({ value }) => value === "AMS")) {
      setListS((prev_state) => ({
        ...prev_state,
        NNS: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        NNS: false,
      }));
    }

    if (e.selected.find(({ value }) => value === "PEP")) {
      setListS((prev_state) => ({
        ...prev_state,
        PEP: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        PEP: false,
      }));
    }
  };

由于使用不同的标签和值属性，因此需要使用组件的getOptionLabel来标识标签。 您的值不包括AMS，您需要在changeList函数的第二个if/else中控制NNS而不是AMS。 以下代码可以作为在多个可选选择组件上设置默认值的有效示例

    import React, { Component, useState } from 'react';
    import Select from 'react-select';

    const MySelectComponent = () => {

      const [ListS, setListS] = useState({
        Sanctions: true,
        NNS: true,
        PEP: false,
      });

      const listType = [
        { value: "Sanctions", label: "Sanctions" },
        { value: "NNS", label: "AMS" },
        { value: "PEP", label: "PEP" },
      ];

      const changeList = (e) => {
      console.log("List s is.....", ListS);
      console.log("e here is", e);

      if (e.selected.find(({ value }) => value === "Sanctions")) {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: false,
        }));
        //setSearchType({ value: "individual", label: "individual" });
      }

      if (e.selected.find(({ value }) => value === "NNS")) {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: false,
        }));
      }

      if (e.selected.find(({ value }) => value === "PEP")) {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: false,
        }));
      }
      };
      const selectedValueKeysFiltered = Object.keys(ListS).filter((sv) => {
          return ListS[sv];
      });

      const selectedValue = selectedValueKeysFiltered.map((svk) => {
        return listType.find(lt => lt.value === svk);
      });

      return <Select
        getOptionLabel={option => {return `${option.label}`}}
         options={listType}
         name="sanctionList"
         placeholder="Select"
         isMulti
         styles={{
           multiValueLabel: (base) => ({
             ...base,
             backgroundColor: "#0bb7a7",
             color: "white",
             fontSize: "0.8vw",
             borderRadius: 5,
           }),
           control: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
             borderColor: "#adadad",
           }),
           menu: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
           }),
         }}
           // isDisabled={!ListSel}
           value={selectedValue}
         onChange={(e) => changeList({ selected: e })}
         theme={(theme) => ({
           ...theme,
           colors: {
             ...theme.colors,
             text: "black",
             primary25: "#d6fdf7",
             primary: "#0bb7a7",
             primary50: "#d6fdf7",
           },
         })}
       ></Select>;
    };

    export default MySelectComponent;

---

如果提供有关Select组件的信息，可能会更好。此外，还不清楚您是否需要有关设置默认选定选项或在选择默认选项后更改该选项的帮助。需要像您在图像中看到的那样设置默认值，并且如果用户希望删除默认值或只选择一个，他现在可以这样做，但未设置为默认值用户需要逐个选择该列表对象确定，你在useState中是否尝试将值设置为true而不是false。是的，我尝试了这种方式嘿，我们是活生生的人类，不是像谷歌搜索这样的程序！如果你和人类交谈，使用句子。好的，我会检查这个方法

              <Select
                options={listType}
                name="sanctionList"
                placeholder="Select"
                isMulti
                styles={{
                  multiValueLabel: (base) => ({
                    ...base,
                    backgroundColor: "#0bb7a7",
                    color: "white",
                    fontSize: "0.8vw",
                    borderRadius: 5,
                  }),
                  control: (data) => ({
                    ...data,
                    fontFamily: "Montserrat",
                    fontSize: "0.8vw",
                    borderColor: "#adadad",
                  }),
                  menu: (data) => ({
                    ...data,
                    fontFamily: "Montserrat",
                    fontSize: "0.8vw",
                  }),
                }}
                  // isDisabled={!ListSel}
                  value={ListS}
                onChange={(e) => changeList({ selected: e })}
                theme={(theme) => ({
                  ...theme,
                  colors: {
                    ...theme.colors,
                    text: "black",
                    primary25: "#d6fdf7",
                    primary: "#0bb7a7",
                    primary50: "#d6fdf7",
                  },
                })}
              ></Select>

    import React, { Component, useState } from 'react';
    import Select from 'react-select';

    const MySelectComponent = () => {

      const [ListS, setListS] = useState({
        Sanctions: true,
        NNS: true,
        PEP: false,
      });

      const listType = [
        { value: "Sanctions", label: "Sanctions" },
        { value: "NNS", label: "AMS" },
        { value: "PEP", label: "PEP" },
      ];

      const changeList = (e) => {
      console.log("List s is.....", ListS);
      console.log("e here is", e);

      if (e.selected.find(({ value }) => value === "Sanctions")) {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: false,
        }));
        //setSearchType({ value: "individual", label: "individual" });
      }

      if (e.selected.find(({ value }) => value === "NNS")) {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: false,
        }));
      }

      if (e.selected.find(({ value }) => value === "PEP")) {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: false,
        }));
      }
      };
      const selectedValueKeysFiltered = Object.keys(ListS).filter((sv) => {
          return ListS[sv];
      });

      const selectedValue = selectedValueKeysFiltered.map((svk) => {
        return listType.find(lt => lt.value === svk);
      });

      return <Select
        getOptionLabel={option => {return `${option.label}`}}
         options={listType}
         name="sanctionList"
         placeholder="Select"
         isMulti
         styles={{
           multiValueLabel: (base) => ({
             ...base,
             backgroundColor: "#0bb7a7",
             color: "white",
             fontSize: "0.8vw",
             borderRadius: 5,
           }),
           control: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
             borderColor: "#adadad",
           }),
           menu: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
           }),
         }}
           // isDisabled={!ListSel}
           value={selectedValue}
         onChange={(e) => changeList({ selected: e })}
         theme={(theme) => ({
           ...theme,
           colors: {
             ...theme.colors,
             text: "black",
             primary25: "#d6fdf7",
             primary: "#0bb7a7",
             primary50: "#d6fdf7",
           },
         })}
       ></Select>;
    };

    export default MySelectComponent;