Question

加载时，我正在使用反应选择和预选选项（来自状态）。使用倍数选择true。当我单击“选择”框时，它仍然显示已经显示的选项。如何从选项列表中删除那些？

这是我的代码：

  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”值，其中值：数字

可能是因为它没有在加载时从select中过滤值吗？ console.log（filteredDevices）

{id：“ 5d25f9d2dc4aea7838b0aa9f”标签：“会议室2”，值：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确实在起作用

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

1 个答案: