如何禁用已從下拉列表中選擇的選項？

Question

在使用 antd 庫的 React 項目中，我從 json 數據創建了一個選項列表，該數據填充為下拉列表。 以下是代碼供參考

json數據

const newData = [
  {
    id: 123,
    name: "Vijay"
  },
  {
    id: 345,
    name: "Sanket"
  },
  {
    id: 546,
    name: "Hitesh"
  },
  {
    id: 789,
    name: "Sameer"
  },
  {
    id: 421,
    name: "Akshay"
  }
];

該數據在<Select/>

<h2>Data 1</h2>
    <Select
      onChange={(key, val) => handleOnValuesChange(key, val)}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={newData.map((_) => ({
        label: _.name,
        value: _.id
      }))}
      bordered={false}
    />
    <br />
    <h2>Data 2</h2>
    <Select
      onChange={(key, val) => handleOnValuesChange(key, val)}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={newData.map((_) => ({
        label: _.name,
        value: _.id
      }))}
      bordered={false}
    />

onChange 函數

const handleOnValuesChange = (key, val) => {
  const allData = newData.map((data) => {
    if (data.id === val) {
      return {
        ...data,
        disabled: true
      };
    } else {
      return {
        ...data,
        disabled: false
      };
    }
  });
  console.log("NEW DATA", allData);
};

選擇Vijay和Akshay時，我期待數據

0: {id: 1, value: "Vijay", disabled: true } 
1: {id: 2, value: "Sanket", disabled: false}
2: {id: 3, value: "Hitesh", disabled: false }
3: {id: 4, value: "Sameer", disabled: false }
4: {id: 5, value: "Akshay", disabled: true }

但得到輸出為

0: {id: 1, value: "Vijay", disabled: false } {/* This disabled should change to true */}
1: {id: 2, value: "Sanket", disabled: false}
2: {id: 3, value: "Hitesh", disabled: false }
3: {id: 4, value: "Sameer", disabled: false }
4: {id: 5, value: "Akshay", disabled: true }

如何解決這個問題？ 高度贊賞任何適當的解決方案

這是代碼和框鏈接： https ://codesandbox.io/s/bordered-less-antd-4-17-0-alpha-7-forked-wtur0

Answer 1

您始終使用基本的 newData 元素。 所以在每次調用 handleOnValuesChange 時，您都沒有將值設置為禁用。

您需要更新 newData 或使用其他一些臨時變量。

value 也是 antd select 使用的 onChange 的第一個參數。

let newData = [
  {
    id: 123,
    name: "Vijay",
    disabled: false,
  },
  {
    id: 345,
    name: "Sanket",
    disabled: false,
  },
  {
    id: 546,
    name: "Hitesh",
    disabled: false,
  },
  {
    id: 789,
    name: "Sameer",
    disabled: false,
  },
  {
    id: 421,
    name: "Akshay",
    disabled: false,
  }
];

const handleOnValuesChange = (val) => {
  console.log("VAL", val);
  newData = newData.map((data) => {
    console.log(data, val);
    if (data.id === val) {
      return {
        ...data,
        disabled: true
      };
    }
    return data;
  });
  console.log("NEW DATA", newData);
};

Answer 2

我檢查了沙箱代碼，發現您的代碼存在多個問題。

1. 您必須使用更新值更改newData值，否則它將舊數據用於渲染。
2. 您必須在 handleOnValuesChange 函數中比較if (data.id === val.value)而不是if (data.id === val) 。
3. 您只需返回其他部分的數據。

您可以在Sandbox上檢查修改后的實現

如果您將 state 用於newData

Answer 3

newData 應該存儲在一個狀態中，以便禁用已經選擇的選項。 這是因為只有在更新 props 或 state 時才會重新渲染 DOM。

因此，在您的代碼中，由於數據未以任何狀態存儲，因此一旦更改了焦點選項，它就不會更改非焦點選項。

我對代碼進行了一些更改，並在sandbox 中添加了工作示例。

  const [data, setData] = React.useState(updatedData); //store the newData with disabled added
  const [prevKey, setPrevKey] = React.useState(null); //store the last changed option



  const handleOnValuesChange = (key, val) => {
    const updating = [...data];
    setPrevKey(val.value);
    data.map((d, i) => {
      if (d.id === val.value) {
        updating[i] = {
          ...d,
          disabled: true
        };
      }
      if (d.id === prevKey) { //this toggles the previous selected value to false
        updating[i] = {
          ...d,
          disabled: false
        };
      }
    });
    setData(updating);
  };



.....
<Select
        onChange={(key, val) => handleOnValuesChange(key, val)}
        placeholder="Select any one"
        style={{ width: 120 }}
        options={data
          .filter((d) => d.disabled === false) //this shows only the options that are not disabled
          .map((_) => {
          console.log(_.name)
          console.log(_.id)
          return({
            label: _.name,
            value: _.id
          })})}