CODEWITHSUNDEEP
javascriptreactjsantd
Santraj Kumar
Santraj Kumar

Reputation: 227

Get the ant-design Select dropdown value when hover

How can we find the ant-design dropdown hovered value?

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

Suppose when I hover any value from dropdown, I should read the hovered value.

Upvotes: 2

Views: 1288

Answers (1)

zerocewl
zerocewl

Reputation: 12804

I think this is not supported by antd select out of the box, but you can catch the mouseevents e.g. by adding an onMouseEnter to each antd select option.

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

Here is working stackblitz.

Complete code from the 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'));

Upvotes: 1

Related Questions