[英]How to remove pre-selected options when loading select control?
I am using react-select and pre-selecting options (from state) when it loads.我在加载时使用反应选择和预选选项(来自状态)。 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”值,其中值:数字
may be because of this it does not filter the value from select when it loads?可能是因为它在加载时不会过滤 select 中的值? console.log(filteredDevices)
console.log(过滤设备)
{ id: "5d25f9d2dc4aea7838b0aa9f" label: "Meeting room 2" value: 0 }
{ id: "5d25f9d2dc4aea7838b0aa9f" label: "会议室 2" value: 0 }
Let me know if you need anymore code to understand this problem.让我知道您是否需要更多代码来理解这个问题。 Thanks
谢谢
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
道具,它应该做你想做的事:
<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这是一个工作示例,显示了上述内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.