加载选择控件时如何删除预选选项？

Question

我在加载时使用 react-select 和预选选项（从状态）。使用多选真。 当我单击选择框时，它仍然显示已经显示的选项。如何从选项列表中删除这些？

这是我的代码：

  const options = []
    {
        deviceData ? deviceData.forEach((element, key) => {
            options.push({ value: element.id, label: element.area })
        }) : null;
    }

         <Select isMulti
                                        isSearchable
                                            value={defaultSelected}
                                            onChange={handleChange}
                                            options={options}
                                        />

            function handleChange(selectedOption) {
                setDefaultSelected(selectedOption)
            };

    async function getRooms(deviceIds) {
        ... // filterring logic to select multiple options load 
    ... filteredDevices.push({ value: index, label: devicesAll.area })
            setDefaultSelected(filteredDevices) // This loads pre-selected values to multi select box. 
    }

更新： 我注意到只有当我提供值作为索引时，预选才有效（值 = {defaultSelected}）。 所以我在下面作为“defaultSelected”值传递 value: number

可能是因为这个原因，它在加载时没有过滤来自 select 的值？ console.log(filteredDevices)

{ id: "5d25f9d2dc4aea7838b0aa9f" label: "会议室 2" value: 0 }

如果您需要更多代码来理解这个问题，请告诉我。谢谢

Answer 1

如果我理解您的问题，您希望在第一次渲染时预先选择“默认值”（由 defaultSelected 提供），并且您希望用户在后续交互过程中可以更改这些值。

一种方法是通过 defaultValue 道具，它应该做你想做的事：

<Select isMulti isSearchable
        defaultValue={defaultSelected} // <-- use defaultValue instead
        onChange={handleChange}
        options={options} />

例如，做这样的事情：

const values = [
  { id: "5d25f9d2dc4aea7838b0aa9f", label: "Meeting room 2", value: 0 },
  { id: "5d25f9d2dc4aea7838b11111", label: "Meeting room 1", value: 1 }
];

<Select
    defaultValue={[values[0]]}
    isMulti
    name="colors"
    options={values} />

这是a working example showing以上的行动