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

问题描述 投票:1回答:1

我正在加载时使用react-select和预选选项(来自状态)。使用倍数选择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”值,其中value:number

可能是由于这个原因,它在加载时没有过滤select中的值?console.log(filteredDevices)

{id:“ 5d25f9d2dc4aea7838b0aa9f”标签:“ Meeting room 2”值:0}

enter image description here

让我知道您是否需要更多代码来了解此问题。谢谢

javascript reactjs react-hooks react-select
1个回答
0
投票

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

一种方法是通过defaultValue道具,它应该做您想要的事:

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} /> 以上的内容

© www.soinside.com 2019 - 2024. All rights reserved.