javascript - 加载选择控件时如何删除预选选项？(How to remove pre-selected options when loading select control?)

Question

I am using react-select and pre-selecting options (from state) when it loads.

(我正在加载时使用react-select和pre-selecting选项（来自状态）。)

Using multiple select true.

(使用倍数选择true。)

When I click on Select box it still shows the options which are already showing up.

(当我单击“选择”框时，它仍然显示已经显示的选项。)

how to remove those from options list?

(如何从选项列表中删除那些？)

this is my code:

(这是我的代码：)

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

Updated: I noticed pre-selection only works (value={defaultSelected}) when i supply value as index.

(更新：我注意到预选仅在我提供值作为索引时才有效（值= {defaultSelected}）。)

so I am passing below as "defaultSelected" value where value: number

(因此，我在下面将其传递为“ defaultSelected”值，其中value：数字)

may be because of this it does not filter the value from select when it loads?

(可能是因为它在加载时未从select中过滤值吗？)

console.log(filteredDevices)

(console.log（filteredDevices）)

{ id: "5d25f9d2dc4aea7838b0aa9f" label: "Meeting room 2" value: 0 }

({id：“ 5d25f9d2dc4aea7838b0aa9f”标签：“会议室2”，值：0})

Let me know if you need anymore code to understand this problem.

(让我知道您是否需要更多代码来理解此问题。)

Thanks

(谢谢)

  ask by newdeveloper translate from so

Answer 1

If I understand your question, you're wanting "default values" (provided by defaultSelected ) to be pre-selected on first render, and you'd like these to be changeable by the user during subsequent interaction.

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

One way would be via the defaultValue prop which should do what you want:

(一种方法是通过defaultValue ，该defaultValue应执行您想要的操作：)

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

So for example, doing something like this:

(因此，例如，执行以下操作：)

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

Here's a working example showing the above in action

(这是一个实际的示例，展示了上述操作)