时间戳

首页 > 解决方案 > 在反应选择中显示没有嵌套选项的组的选择组名称

javascript - 在反应选择中显示没有嵌套选项的组的选择组名称

问题描述

我正在使用组件react-select：

    <Select
      options={transformedDataWithSubItems}
      value={selectedItem}
      onChange={handleChange}
      isClearable={isClearable}
      placeholder={placeholder}
    />

transformDataWithSubItems 看起来像这样：

const transformedDataWithSubItems = [
  { id: 1, label: "1", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
  { id: 3, label: "2", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
  { id: 5, label: "3", options: [] }
];

某些类别没有项目（标签 3）。选择组件没有显示这样的类别，我该如何解决这个问题？我需要显示没有元素的类别名称。

在此处输入图像描述

标签： javascriptreactjsreact-select

解决方案

如果没有嵌套选项，则需要删除该options属性。

改变{ id: 5, label: "3", options: [] }=>{ id: 5, label: "3" }

const transformedDataWithSubItems = [
      { id: 1, label: "1", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
      { id: 3, label: "2", options: [{ label: 'sub', value: 'sub' }, { label: 'sub', value: 'sub' }] },
      { id: 5, label: "3", options: [] }
    ].map(category => {
      if (category.options.length === 0) return {id: category.id, label: category.label};
      return category;
    });

编辑： 如果你想让它显示为类别，那么你必须在选项中至少有一个元素。因此，在选项中添加一个元素并禁用它。要做到这一点

  1. 添加{ label: 'No sub category', disabled: true }
const transformedDataWithSubItems = [
 {
   id: 1,
   label: '1',
   options: [
     { label: 'sub', value: 'sub' },
     { label: 'sub', value: 'sub' },
   ],
 },
 {
   id: 3,
   label: '2',
   options: [
     { label: 'sub', value: 'sub' },
     { label: 'sub', value: 'sub' },
   ],
 },
 { id: 5, label: '3', options: [] },
].map((category) => {
 if (category.options.length === 0) {
   return { ...category, options: [{ label: 'No sub category', disabled: true }]};
 }
 return category;
});

  1. 添加isOptionDisabled道具以选择组件。

     <Select
   options={transformedDataWithSubItems}
   value={selectedItem}
   onChange={handleChange}
   isClearable={isClearable}
   placeholder={placeholder}
   isOptionDisabled={(option) => option.disabled}
 />

查看示例

推荐阅读