在 React select 中显示没有嵌套选项的组的 select 组名称

Question

我正在使用组件 react-select:

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

transformedDataWithSubItems 看起来像这样：

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）。 select 组件没有显示这样的类别，我该如何解决这个问题？我需要显示没有元素的类别名称。

enter image description here

Answer 1

如果没有嵌套选项，则需要删除 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;
    });

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

添加{ 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;
});

将 isOptionDisabled 属性添加到 select 组件。

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

见example

在 React select 中显示没有嵌套选项的组的 select 组名称

Display select group name for group with no nested options in react select

javascript

reactjs

react-select