如何获取ant-design Select组件下拉菜单鼠标悬停的选项值

实现方案 #

可以直接给Select的每个Option组件绑定onMouseEnter事件，在事件触发时传入当前选项的value值即可实现需求，示例代码如下：

import { Select } from 'antd';
const { Option } = Select;

function Demo() {
  const handleChange = (value) => {
    console.log('选中值：', value);
  };

  // 处理选项悬停逻辑
  const handleOptionHover = (hoverValue) => {
    console.log('当前悬停选项的value：', hoverValue);
    // 此处可添加自定义逻辑，比如将悬停值存入state等
  };

  return (
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack" onMouseEnter={() => handleOptionHover('jack')}>Jack</Option>
      <Option value="lucy" onMouseEnter={() => handleOptionHover('lucy')}>Lucy</Option>
      <Option value="Yiminghe" onMouseEnter={() => handleOptionHover('Yiminghe')}>yiminghe</Option>
    </Select>
  );
}

如果你的选项是通过数组循环渲染的，写法可以更简洁：

const optionList = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'Yiminghe', label: 'yiminghe' },
];

function Demo() {
  const handleChange = (value) => {
    console.log('选中值：', value);
  };

  const handleOptionHover = (hoverValue) => {
    console.log('当前悬停选项的value：', hoverValue);
  };

  return (
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      {optionList.map(item => (
        <Option 
          key={item.value} 
          value={item.value}
          onMouseEnter={() => handleOptionHover(item.value)}
        >
          {item.label}
        </Option>
      ))}
    </Select>
  );
}

注意：该方案兼容antd 4.x和5.x所有版本，即使开启下拉框虚拟滚动功能也可正常触发事件。

内容的提问来源于stack exchange，提问作者Santraj Kumar