有没有办法在“反应选择”中的搜索选项中包含组标签

Question

我曾经react-select允许用户从选项列表中搜索/过滤。但是，搜索中不包括组标签。只是想知道是否有任何方法可以在搜索中包含组标签。

在下面的屏幕截图中，搜索“COLOR”时未显示组标签“COLORECTAL”及其选项。

Answer 1

我完全同意 Nitsew。

你可以尝试从这样的filterOption道具开始：

const filterOption = ({ label, value }, string) => {
  // default search
  if (label.includes(string) || value.includes(string)) return true;

  // check if a group as the filter string as label
  const groupOptions = groupedOptions.filter(group =>
    group.label.toLocaleLowerCase().includes(string)
  );

  if (groupOptions) {
    for (const groupOption of groupOptions) {
      // Check if current option is in group
      const option = groupOption.options.find(opt => opt.value === value);
      if (option) {
        return true;
      }
    }
  }
  return false;
};

function App() {
  return (
    <div className="App">
      <Select
        defaultValue={colourOptions[1]}
        filterOption={filterOption}
        options={groupedOptions}
      />
    </div>
  );
}

实时代码沙盒示例。