时间戳

首页 > 解决方案 > 如何在`react-select`中禁用`deselect-option`？

reactjs - 如何在`react-select`中禁用`deselect-option`？

问题描述

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

这个问题#3234描述了同样的问题，并建议解决这个问题的一种方法是以某种方式处理action参数onChange。

这是我根据建议的解决方案尝试的解决方案：

import React, { Component } from "react";
import Select from "react-select";


export default class MultiSelect extends Component<*, State> {
  handleChange(option, action) {
    console.log(option, action);
    // return;
    if (action === "deselect-option") {
      action = "select-option";
      // now how do I do the component's state?
    }
  }

  render() {
    return (
      <Select
        isMulti
        className="basic-single"
        classNamePrefix="select"
        name="color"
        options={[{"label": "hello", "value": "hello"}, {"label": "world", "value": "world"}]}
        hideSelectedOptions={false}
        onChange={this.handleChange}
      />
    );
  }
}

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

标签： reactjsreact-selectformik

解决方案

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

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

推荐阅读