¿Cómo podemos encontrar el valor flotante del menú desplegable de diseño de hormigas?
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}> <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> <Option value="Yiminghe">yiminghe</Option> </Select>Supongamos que cuando paso el cursor por cualquier valor del menú desplegable, debería leer el valor que se encuentra sobre el cursor.
Creo que esto no es compatible con antd select fuera de la caja, pero puede capturar los eventos del mouse, por ejemplo, agregando un onMouseEnter a cada opción de selección antd.
<Option value="jack" onMouseEnter={handleChange}> Jack </Option>Aquí está trabajando stackblitz.
Código completo del 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'));