Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

184
Visualizações
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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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'));

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda