Question

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

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;

public class JdbcTst0 {

    public static void main(String[] args) {
        String url = "jdbc:ucanaccess://C:/users/jeff/comics.accdb";
        String createstring = "CREATE TABLE Spider_Man (" +
                              "ComicName varchar(40), " +
                              "IssueDate varchar(40), " +
                              "IssueName varchar(40), " +
                              "MintCond varchar(40), " +
                              "IssueValue double, " +
                              "IssueNum int)";
        try (Connection con = DriverManager.getConnection(url, "", "");
             Statement stmt = con.createStatement()) {
            stmt.executeUpdate(createstring);
            System.out.println("Spider_Man table created");
        }
        catch (SQLException xSql) {
            xSql.printStackTrace();
        }
    }
}

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,
      }));
    }
  };

const [ListS, setListS] = useState({
    Sanctions: false,
    NNS: false,
    PEP: false,
  });
 const listType = [
    { value: "Sanctions", label: "Sanctions" },
    { value: "NNS", label: "AMS" },
    { value: "PEP", label: "PEP" },
  ];

Answer 1

由于您使用了不同的 label 和 value 属性，因此您需要使用 react-select 组件的 getOptionLabel 来标识标签。
您的值不包括 AMS，您需要在 NNS 函数的第二个 if/else 中控制 AMS 而不是 changeList。

以下代码可以作为在多选 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;

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

1 个答案: