reactjs 有什么方法可以使用isMulti而不删除我已经选择的选项吗?换句话说,具有重复/重复的所选选项?

5sxhfpxr  于 2023-05-28  发布在  React
关注(0)|答案(3)|浏览(554)

基本上,我想使用react-select库并使用isMulti prop ,但问题是,在选择一个选项后,值将被删除。正如你可以看到下面提供的图像,只要我点击“美国:1、“这个选择会消失。但对于我正在尝试构建的应用程序,客户当然有可能想要两个相同大小的。因此,他们会选择2“US:1”,并自动将数量设置为2。问题是,一旦他们选择了“美国:1、“这个选择就消失了。
这是我目前所拥有的一切。

const options = [
    {value: 1, label: "US: 1"},
    {value: 1.25, label: "US: 1.25"},
    {value: 1.5, label: "US: 1.5"},
    {value: 1.75, label: "US: 1.75"},
    {value: 2, label: "US: 2"},
    {value: 2.25, label: "US: 2.25"},
]
class Details extends Component {
 state={
        selectedOption: []
    }
 handleChange = (selectedOption) => {
        this.setState({ selectedOption: selectedOption });

    }
render() {

<Select isMulti={true} isSearchable={true} onClick={value.changeSize(id, selectedOption)} value={selectedOption} onChange={this.handleChange} options={options}></Select>
}
}

这里有一个例子来说明我在说什么。“美国:1”消失时,它的点击时,我想这个选项留下来。我想它改变了我的“选项”数组,并显示了一个没有点击选项的新数组。如果我能以某种方式在onChange上的每一个单之后都给它提供这些原始值,那就太棒了。我不知道如何挖掘到图书馆如何做到这一点,或者如果它甚至是可能的。https://www.npmjs.com/package/react-select

i1icjdpr

i1icjdpr1#

我会这样做:

class Details extends Component {
  state = {
    selectedOption: []
  };
  handleChange = selectedOption => {
    const newSelectedOption = selectedOption.map(opt => ({
      label: opt.label,
      innerValue: opt.value,
      // I set a random value because it is needed to be able to delete the value without deleting all of them
      value: Math.random()
    }));
    this.setState({ selectedOption: newSelectedOption });
  };
  render() {
    return (
      <Select
        isMulti={true}
        isSearchable={true}
        value={this.state.selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

我们的想法是不使用value作为它的原始目标。当label props传递给Select内部的value时,它仍然正确地显示它。因此,您将基于innerValue和技巧react-select
此处为live example

hxzsmxv2

hxzsmxv22#

我想你所需要的就是把hideSelectedOptions={false}加到<Select />上。比如:

<Select 
  isMulti={true} 
  hideSelectedOptions={false}
  options={options}
  ...
/>
sqserrrh

sqserrrh3#

我有一个@Laura提供的稍微干净的版本。

import { useState } from "react";
import Select from "react-select";

const ReactMultiSelectDuplicate = ({ options = [], onChange = null }) => {
    const [selectedOptions, setSelectOption] = useState([]);

    const handleChange = changedOptions => {
      const newSelectedOption = changedOptions.map(op => ({ ...op, value: Math.random() * Math.random() }));
      setSelectOption(newSelectedOption);
      if (onChange) {
        onChange(newSelectedOption.map(({ label, av: value}) => ( {label, value } )))
      }
    };
      return (
        <Select
          isMulti
          hideSelectedOptions={false}
          isClearable={true}
          value={selectedOptions}
          onChange={handleChange}
          options={options.map(op => ({...op, av: op.value, value: Math.random() * Math.random() }))}
        />
      );
};

export default ReactMultiSelectDuplicate;

然后在你的实际组件中,像下面这样使用:

<ReactMultiSelectCustom
  options={options}
  onChange={(values) => console.log(values)}
/>

在Laura的回答中,第一个选择没有innerValue属性。

相关问题