将具有多个相同值的选项传递给 React-select

Question

下面是我如何调用 Select 菜单的片段：

import Select from 'react-select';

const SelectMenu = (props) => {
  const { options, defaultValue, onChange, name, label } = props;
  return (  
      <Select
        options={options}
        defaultValue={defaultValue}
        onChange={onChange}
        name={name}
        id="search-select"
      />
  );
};

我的选项对象如下所示：

TestObj: [
  {
    label: 'Test 1',
    value: 3.49
  },
  {
    label: 'Test 2',
    value: 3.99
  },
  {
    label: 'Test 3',
    value: 3.89
  },
  {
    label: 'Test 4',
    value: 3.99
  },
  {
    label: 'Test 5',
    value: 0
  }
]

因为两个选项共享相同的值，所以我得到了这个效果：

可以看出，由于测试 2 和 4 共享相同的值，它们都显示为选中状态。

有没有一种方法可以让我在保持相同值的同时只选择实际选择的选项？

Answer 1

默认情况下 react-select 检查值是否被选中的方式是提取 value 部分并将其与所选内容（具有值键的对象数组）进行比较。

使用 isOptionSelected 您可以覆盖所采用的策略：

isOptionSelected={(option, selectValue) => selectValue.some(i => i === option)}

这或多或少是内部函数在不提取 value 部分而是比较整个对象的情况下的工作方式。

将具有多个相同值的选项传递给 React-select

Passing options with multiple values that are the same in to React-select

reactjs

react-select