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

Mam dwa wybrane rozwijanie exampleA, exampleB w ten sposób.

              <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>

Chcę tego, aby użytkownik wybrał "name":"Type A" w exampleA, na exampleB użytkownik może wybrać tylko "name":"Type B", "name":"Type C".

Lub jeśli użytkownik wybiera "name":"Type B" w exampleA, na exampleB użytkownik może wybrać tylko "name":"Type A", "name":"Type C".

Jak mogę to zrobić?

0
Alex 22 październik 2020, 13:31

1 odpowiedź

Najlepsza odpowiedź

Możesz przefiltrować stan na podstawie wartości wybranej:

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

Działałoby to jednak, jeśli chcesz, aby obie wybrane są filtrowane na wybranej wartości. Jeśli chcesz przefiltrować wybory innych elementów, wystarczy użyć dwóch różnych stanów (patrz pełny kod poniżej lub tutaj https://codesandbox.io/s/hopeful-snowflake-wf6w6?file=/src/App.js:0-1572 )

Zwróć uwagę, że filtr jest na initdata, aby odzyskać niezawodne wartości.

Pełny działający kod:

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


1
Slim 22 październik 2020, 11:06