背景

antd+react 項目里有個select，由于option數(shù)據(jù)量較大，目前采用的是后端默認返回第一頁剩下的數(shù)據(jù)需要靠用戶手動輸入關鍵字來檢索展示結果。

最近得到用戶反饋：

當想要選擇單元時，點擊select出現(xiàn)內(nèi)容后誤以為展示的是全部結果( 實際只是前30條數(shù)據(jù) )，但是卻沒有在這里找到他想選擇的單元。

有兩種方案：

1. 將下拉框變成輸入框；沒有關鍵字時不請求接口；將placeholder改成更具搜索引導性的語句。
2. 給option做分頁懶加載。

按照這數(shù)據(jù)量級果斷選擇了第二種方案，做懶加載；

過程

先查查antd的select部分文檔

很好很好，就是我需要的，來試試

<Form.Item>
  {getFieldDecorator('unit', {
    rules: [
      {
        required: true,
        message: '請輸入單元',
      },
    ],
})(
  <Select
    showSearch
    allowClear
    key="unit"
    placeholder="請輸入單元"
    onFocus={() => handleSearch(‘unit’)}
    onSearch={(val) => handleSearch('unit', val)}
    onPopupScroll={(e) =>{console.log('滾動中...')}}
  >
  {unitList.map((item: any) => (
    <Option
      key={item.unitId}
      value={item.unitId}
    >
      {item.unitName}
    </Option>
  ))}
  </Select>
)
<Form.Item>

但是發(fā)現(xiàn)滾動后并沒有打印出滾動中...。

猜想：難道是和form有關？

于是在最最最最外層用antd最簡單的例子寫了個demo:

<Select defaultValue="lucy"  onPopupScroll={(e) =>{console.log('滾動中...')}}>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>Disabled</Option>
  ....
  <Option value="Yiminghe">yiminghe</Option>
</Select>

即使這么簡單了?。?！還是沒有打?。。。]有執(zhí)行回調(diào)?。?！為什么沒有觸發(fā)呢？？
搜索引擎搜了個遍，搜到的要不就是例子要不就是說antd版本過老不支持。。。我可是3.26.19!??！antd對應版本文檔上清清楚楚寫著支持這屬性。。

白紙黑字

猜想：難道是antd生成的option列表dom結構有些問題導致監(jiān)聽不到？

看了下生成的dom

ul外層的div

ul

這兩個元素的overflow都是auto?。。?！有沒有可能是監(jiān)聽元素滾動的時候互相影響了導致沒觸發(fā)？

1. 強制覆寫 div 的樣式

:global {
  .ant-select-dropdown>div{
    overflow: initial;
  }
}

無事發(fā)生

2. 強制覆寫ul 的樣式

:global {
  .ant-select-dropdown-menu {
    overflow: initial;
  }
}

可以滾動??！

可見 antd 監(jiān)聽的中間這個div的滾動?。。。?/h3>

附一下代碼

const handleScroll = (e)=>{
    const { target } = e;
   // 提前200到底的時候加載！
    if (target.scrollTop + target.offsetHeight >target.scrollHeight - 200) {
      console.log('開始懶加載！！');
    }
}

<Form.Item>
  {getFieldDecorator('unit', {
    rules: [
      {
        required: true,
        message: '請輸入單元',
      },
    ],
})(
  <Select
    showSearch
    allowClear
    key="unit"
    placeholder="請輸入單元"
    onFocus={() => handleSearch(‘unit’)}
    onSearch={(val) => handleSearch('unit', val)}
    onPopupScroll={((e) => handleScroll(e,'unit'))}}
  >
  {unitList.map((item: any) => (
    <Option
      key={item.unitId}
      value={item.unitId}
    >
      {item.unitName}
    </Option>
  ))}
  </Select>
)
<Form.Item>

結果

通過強行覆寫antd樣式解決了這個問題，后續(xù)科學上網(wǎng)在issue上也發(fā)現(xiàn)了它。

image.png

只能說??！確實很不負責?。?！
另外想說雖然組件庫超級多，拿過來就用真的很快，但是一旦出現(xiàn)問題排查起來還是很致命的。。尤其一些工程化的庫 umi qiankun等等等等，只能說雙刃劍吧。。。。