Ant Design Select 滚动数据变化时的处理方法

在 Ant Design Select 组件中，如果滚动时数据发生变化，可以通过以下步骤进行处理：

在 Select 组件中，使用 ref 属性获取 Select 组件的实例。

<Select ref={selectRef} />

在组件中定义一个 state，用于存储当前 Select 组件的选中值。

const [selectedValue, setSelectedValue] = useState();

在 useEffect 钩子函数中监听 Select 组件的滚动事件。

useEffect(() => {
  const selectNode = selectRef.current?.rcSelect?.current;
  if (selectNode) {
    const handleScroll = () => {
      setSelectedValue(selectNode.state.value);
    };
    selectNode.popupContainer.addEventListener('scroll', handleScroll);
    return () => {
      selectNode.popupContainer.removeEventListener('scroll', handleScroll);
    };
  }
}, [selectRef]);

在 handleScroll 函数中，通过获取 Select 实例的 state 值来获取当前选中的值。

const handleScroll = () => {
  setSelectedValue(selectNode.state.value);
};

在 JSX 中将 state 值传给 Select 组件的 value 属性，以保持选中状态不变。

<Select ref={selectRef} value={selectedValue} />

完整代码示例：

import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
const { Option } = Select;

function App() {
  const [selectedValue, setSelectedValue] = useState();
  const selectRef = React.createRef();

  useEffect(() => {
    const selectNode = selectRef.current?.rcSelect?.current;
    if (selectNode) {
      const handleScroll = () => {
        setSelectedValue(selectNode.state.value);
      };
      selectNode.popupContainer.addEventListener('scroll', handleScroll);
      return () => {
        selectNode.popupContainer.removeEventListener('scroll', handleScroll);
      };
    }
  }, [selectRef]);

  return (
    <Select ref={selectRef} value={selectedValue}>
      <Option value='1'>Option 1</Option>
      <Option value='2'>Option 2</Option>
      <Option value='3'>Option 3</Option>
      <Option value='4'>Option 4</Option>
      <Option value='5'>Option 5</Option>
      <Option value='6'>Option 6</Option>
      <Option value='7'>Option 7</Option>
      <Option value='8'>Option 8</Option>
      <Option value='9'>Option 9</Option>
      <Option value='10'>Option 10</Option>
      <Option value='11'>Option 11</Option>
      <Option value='12'>Option 12</Option>
      <Option value='13'>Option 13</Option>
      <Option value='14'>Option 14</Option>
      <Option value='15'>Option 15</Option>
      <Option value='16'>Option 16</Option>
      <Option value='17'>Option 17</Option>
      <Option value='18'>Option 18</Option>
      <Option value='19'>Option 19</Option>
      <Option value='20'>Option 20</Option>
    </Select>
  );
}