允许多次选择相同的选项，并使用react-bootstrap-typeahead。

Question

我正在寻找一种方法来选择多次相同的选项。

下面是我的代码：

const [multiSelections, setMultiSelections] = useState<Option[]>(currentSpotSkills);

<Typeahead
          id="basic-typeahead-multiple"
          labelKey="skill"
          multiple
          onChange={(nd) => setMultiSelections(nd)}
          options={availableSkills!.slice().sort() as Option[]}
          placeholder="Rôle..."
          selected={multiSelections}
          />

选择一组不同的选项是完美的，但是一旦选择了一个选项，它就会从用户可用的列表中筛选出来。我明白这是因为默认的filterBy行为。

因此，作为第一步，我禁用了filterBy道具设置为() => true的筛选，但当然它完全禁用了筛选(我可以很容易地编写自定义filterBy来处理它)。

主要问题是，它为所选的每个选项保留相同的ID，因此当用户尝试从所选列表中删除一个选定选项时，它也会删除所有具有相同标签/id的选项。

是否有任何方法可以选择多次相同的选项，同时保持这些分开？

Answer 1

如果要多次选择相同的选项并使其与其他实例不同，则需要以某种方式区分它。这样做的最佳方法可能是在将选项保存到组件状态之前向选项(如id)添加一个临时的唯一标识符。您可以使用类似于lodash.uniqueid的东西来生成id并将其添加到onChange中的选项中。

import uniqueId from 'lodash.uniqueid';

const Example = () => {
  const [multiSelections, setMultiSelections] = useState([]);

  return (
    <Typeahead
      id="basic-typeahead-multiple"
      labelKey="skill"
      multiple
      onChange={(selections) => {
        // If the option already has an `id`, return it,
        // otherwise add the identifier.
        const newSelections = selections.map((selection) =>
          selection.id ? selection : { ...selection, id: uniqueId() }
        );
        setMultiSelections(newSelections);
      }}
      options={availableSkills!.slice().sort()}
      placeholder="Rôle..."
      selected={multiSelections}
    />
  );
};

这种方法的一个很好的副作用是它解决了过滤掉所选选项的另一个问题，因为这些选择实际上与您要传递给打字机的初始options集不匹配。

下面是一个有用的示例：https://codesandbox.io/s/lucid-meitner-9ktti7