问使react选择选项不可搜索
EN

Stack Overflow用户

提问于 2019-08-26 18:28:13

回答 1查看 275关注 0票数 0

我使用的是react select，其中一个选项的名称为空白，一个选项的值为not set，另一个选项的名称和值为notification。这意味着我的选项数组看起来像这样(尽管有更多的选项)：

const options = [
  {
    label: '',
    value: 'not set'
  },
  {
    label: 'Notification',
    value: 'notification'
  }
];

因此，当用户寻找通知选项时，他们通常只输入not，然后显示空白选项。

我确实希望这个选项显示在下拉菜单本身，如果有人只是通过它(用箭头键)，但有什么办法，我可以阻止某些选项显示在搜索？也许我可以在选项中包括一把钥匙？

react-select

Stack Overflow用户

回答已采纳

发布于 2019-08-27 16:47:33

我建议您使用道具filterOption来实现您的目标。了解更多如何使用它的这里。

您可以决定只通过label而不是value进行筛选，或者为每个可搜索的选项添加一个键，如下所示：

const options = [
  {
    label: '',
    value: 'not set',
    searchable: false
  },
  {
    label: 'Notification',
    value: 'notification',
    searchable: true
  }
];

// your custom filterOption function
 filterOption = ({ label, value, data }, string) => {
    if (string && data.searchable) {
      return label.includes(string) || value.toString().includes(string);
    } else {
      return true;
    }
  };

票数 2

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57663064

复制

相似问题

问使react选择选项不可搜索
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使react选择选项不可搜索EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使react选择选项不可搜索
EN