时间戳

首页 > 解决方案 > 根据选择的另一个 SELECT 删除 SELECT 选项

reactjs - 根据选择的另一个 SELECT 删除 SELECT 选项

问题描述

const initData = [
   {
      "id":1,
      "name":"Type A",
      "description":"Description Type A"
   },
   {
      "id":2,
      "name":"Type B",
      "description":"Description Type B"
   },
   {
      "id":3,
      "name":"Type C",
      "description":"Description Type C"
   }
]
const [listOption, setListOption] =  useState(initData);

我有两个 select dropdown exampleA，exampleB像这样。

              <CSelect
                custom
                name="exampleA" // exampleB
                id="exampleA" // exampleB
                onChange={(e) => {                          
                 //someFunctionToCheck(e, i);
                }}                       
              >
                {listOption &&
                  listOption.map((x) => {
                    return (
                      <option
                        value={x.id}
                        key={"key" + x.id}
                      >
                        {x.name}
                      </option>
                    );
                  })}
              </CSelect>

我想要这样当用户选择"name":"Type A"inexampleA时，exampleB用户只能选择"name":"Type B", "name":"Type C"。

或者如果用户选择"name":"Type B"in exampleA, onexampleB用户只能选择"name":"Type A", "name":"Type C"。

我怎样才能做到这一点？

标签： reactjs

解决方案

您可以根据您选择的值过滤状态：

const someFunctionToCheck = (e) => {
    e.preventDefault()
    setListOption(initData.filter(entry => entry.id !== parseInt(e.target.value)))
}

但是，如果您希望根据任一选择的值过滤您的选择，这将起作用。如果您只想过滤其他元素的选择，只需使用两种不同的状态（请参阅下面的完整代码或此处https://codesandbox.io/s/hopeful-snowflake-wf6w6?file=/src/App.js:0-第1572章）

请注意，过滤器位于 initData 上，以便将未选择的值放回原处。

完整的工作代码：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const initData = [
    {
      id: 1,
      name: "Type A",
      description: "Description Type A"
    },
    {
      id: 2,
      name: "Type B",
      description: "Description Type B"
    },
    {
      id: 3,
      name: "Type C",
      description: "Description Type C"
    }
  ];
  const [listOption, setListOption] = useState(initData);
  const [listOption2, setListOption2] = useState(initData);
  const someFunctionToCheck = (e, i) => {
    e.preventDefault();
    if (i === 1)
      setListOption2(
        initData.filter((entry) => entry.id !== parseInt(e.target.value))
      );
    else if (i === 2)
      setListOption(
        initData.filter((entry) => entry.id !== parseInt(e.target.value))
      );
  };

  return (
    <div className="App">
      <select
        name="Type A"
        onChange={(e) => {
          someFunctionToCheck(e, 1);
        }}
      >
        {listOption &&
          listOption.map((x) => {
            return (
              <option value={x.id} key={"key" + x.id}>
                {x.name}
              </option>
            );
          })}
      </select>
      <select
        name="Type B"
        onChange={(e) => {
          someFunctionToCheck(e, 2);
        }}
      >
        {listOption &&
          listOption2.map((x) => {
            return (
              <option value={x.id} key={"key" + x.id}>
                {x.name}
              </option>
            );
          })}
      </select>
    </div>
  );
}

推荐阅读