React-select 多下拉onChange实现

Question

使用 react-select 在我的 Mongo 中实现了基于数组字段的动态下拉列表，就像这样。

    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

我的困难在于更改处理函数。我尝试了多种组合并浏览了多个文档，但无法破解我想要的设计。这是我在这个组件中的状态声明

常量 [selectedOptions, setSelectedOptions] = useState([])

这是我想要的 onChange 功能。

假设 - 我的 map 函数输入数组有 2 个元素，所以这意味着 2 select 下拉列表将被推到前端，下拉列表中的值将通过另一个 options1 对象。正如 react-select 所期望的那样，它有一个标签和值键对。假设对象内部有 10 个键值对。

当用户打开表单时，他会看到 2 个下拉菜单。如果他 select 在第一个下拉列表中有 3 个名字，那么我希望这些名字不在第二个下拉列表中。在第二个下拉列表中，假设他 selects。然后需要将所有 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

React-select 多下拉onChange实现

React-select multiple drop downs onChange implementation

reactjs

react-select