Question

我想使用react-select multi Select组件，并且能够多次选择相同的选项。但是，react-select不允许这样做。您可以使用Single更改下拉菜单以显示已选择的选项，但是如果再次选择其中一个，它将被取消选择。

此问题#3234描述了相同的问题，sugggests解决此问题的一种方法是以某种方式处理hideSelectOptions={false}的{{1}}参数。

这是我根据suggested solution尝试的解决方案：

action

我希望能够多次输入“ hello”，但是当我再次尝试输入“ hello”时，它被删除了。

Answer 1

在选项中，数据字段使用任何键使值动态化，在这种情况下，请使用Date.now（）使其动态化。然后使用动作'select-option'附加到选项，使用动作'remove-value'过滤选项数据字段中具有与所选选项标签匹配的标签的所有字段，并附加到数据，再将一个对象附加到Options数据字段

options = [
{ value: Date.now(), label: "SUBJECT" ,val:"SUBJ" },
{ value: Date.now, label: "VERB", val:"VERB" }
]

<Select options={options} isMulti onChange={(e, option) => {
if (option.action === "select-option") {
    Options=[
    ...Options,
    {
        value: option.option.value + "_" + Date.now(),
        label: option.option.label
    }
    ];
} else if (option.action === "remove-value" ||option.action ===  "pop-value") {

    tempData = data.filter(opt => opt.label !== option.removedValue.label)
    Options=[
    ...tempData,
    {
        value: option.removedValue.value + "_" + Date.now(),
        label: option.removedValue.label
    }
    ]
}
}
} />

如何在“反应选择”中禁用“取消选择选项”？

1 个答案: