hover 时获取 ant-design Select 下拉值

Question

如何找到ant-design下拉悬停值？

 <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>

假设当我将鼠标悬停在下拉列表中的任何值时，我应该读取悬停的值。

Answer 1

我认为开箱即用的 antd select 不支持此功能，但您可以捕获鼠标事件，例如通过添加 onMouseEnter to each antd select option.

<Option value="jack" onMouseEnter={handleChange}>
   Jack
</Option>

Here 正在使用 stackblitz。

来自 stackblitz 的完整代码：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select } from 'antd';

const { Option } = Select;

function CustomSelect() {
  const [value, setValue] = useState('');

  function handleChange(value) {
    const hoverText = value.target.innerText;
    setValue(hoverText);
    console.log(`hover ${hoverText}`);
  }

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

ReactDOM.render(<CustomSelect />, document.getElementById('container'));

hover 时获取 ant-design Select 下拉值

Get the ant-design Select dropdown value when hover

javascript

reactjs

antd