React-select multiple downs实现

Question

在我的Mongo中，使用react-select实现了一个基于数组字段的动态下拉列表，如下所示。

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


  const NonFormikSelect = (props) => {

    const [selectedOptions, setSelectedOptions] = useState([])

        let options1 = props.member.members.map(member => ({
            label: member.MemberName,
            value: member.MemberName
        }))

        console.log(options1)

      const selectChangeHandler = (event, numberofgroups) => {
       
      }

          const newValues = props.nogot.tournament.TournamentGroups.map((numberofgroups) => {
        return (
            <Select
            key={numberofgroups}
            name={numberofgroups}
            isMulti
            options={options1}
            value={numberofgroups in selectedOptions ? selectedOptions[numberofgroups]: ""}
            onChange={(event) => selectChangeHandler(event, numberofgroups)}
             />         
        )
    })

    return (
        newValues
    )
      }

  export default NonFormikSelect

我的难点是使用更改处理程序函数。我尝试了多个组合，浏览了多个文档，但无法破解我想要的设计。下面是我在这个组件中的状态声明

const selectedOptions，setSelectedOptions = useState([])

这是我在onChange上想要的功能。

假设-映射函数的输入数组有2个元素，因此这意味着2个选择下拉框将被推送到前端，下拉框中的值将通过另一个options1对象传递。这有一个标签和值键对，正如react-select所期望的那样。让我们假设对象中有10个键值对。

当用户打开表单时，他会看到两个下拉列表。如果他在第一个下拉列表中选择了3个名字，那么我想从第二个下拉列表中选择这些名字。在第二个下拉列表中，假设他选择。然后需要将所有8个值提升到父组件，在那里onSubmit我正在获取一个API并更新我的集合。

这可行吗？我的想法已经用完了。我的更改处理函数现在是空的，因此没有在这里发布任何内容

Answer 1

您要查找的是级联select。

import "./styles.css";
import Select from "react-select";
import { useState } from "react";

const allOptions = [
  {
    label: "john",
    value: 1
  },
  {
    label: "joe",
    value: 2
  },
  {
    label: "joel",
    value: 3
  },
  {
    label: "jackie",
    value: 4
  }
];

const generateInitialState = (numberOfSelects) =>
  numberOfSelects.map((item) => null);

const CustomSelectComponent = ({ value, options, onSelect }) => {
  return (
    <Select
      value={value}
      options={options}
      isMulti
      onChange={onSelect}
    />
  );
};

export default function App() {
  const [selectState, setSelectState] = useState(() =>
    // increase the array elements to add more select fields
    generateInitialState(["Group1", "Group2", "Group3"])
  );

  const onSelectValues = (value, index) => {
    // clone state
    const clonedSelectState = JSON.parse(JSON.stringify(selectState));

    clonedSelectState[index] = value;
    setSelectState(clonedSelectState);
  };

  return (
    <div className="App">
      {selectState.map((selectCount, index) => {
        const options = getOptionsToRender(selectState, allOptions);
        return (
          <CustomSelectComponent
            value={selectState[index]}
            options={options}
            onSelect={(value) => onSelectValues(value, index)}
            key={index}
          />
        );
      })}
    </div>
  );
}

const getOptionsToRender = (allSelectedOptions, allOptions) => {
  // convert [[{}, {}], [{}]] -> [{}, {}, {}]
  const filteredOptions = allSelectedOptions.flatMap((options) => options);

  const optionsToRender =
    filteredOptions.length > 0
      ? allOptions.filter(
          (option) =>
            !filteredOptions.some(
              (selectOption) =>
                option && selectOption && option.value === selectOption.value
            )
        )
      : allOptions;

  return optionsToRender;
};

Cascading Select Example