第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在反應選擇中顯示沒有嵌套選項的組的選擇組名稱

在反應選擇中顯示沒有嵌套選項的組的選擇組名稱

哆啦的時光機 2023-02-24 16:58:25
我正在使用組件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）。選擇組件不顯示這樣的類別，我該如何解決？我需要顯示沒有元素的類別名稱。在此處輸入圖像描述
查看完整描述

1 回答

?
紅顏莎娜

TA貢獻1842條經(jīng)驗 獲得超13個贊

如果沒有嵌套選項，則需要刪除該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

   options={transformedDataWithSubItems}

   value={selectedItem}

   onChange={handleChange}

   isClearable={isClearable}

   placeholder={placeholder}

   isOptionDisabled={(option) => option.disabled}

 />

見例子


查看完整回答
反對 回復 2023-02-24
  • 1 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號