Блог

Главная - Вопросы по программированию - Получите раскрывающееся значение «Выбор дизайна муравья» при наведении курсора

Получите раскрывающееся значение «Выбор дизайна муравья» при наведении курсора

#javascript #reactjs #antd

Вопрос:

Как мы можем найти значение, зависшее в раскрывающемся списке 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>

Предположим, что при наведении курсора на любое значение из выпадающего списка я должен прочитать зависшее значение.

Комментарии:

1. Какую библиотеку вы используете для этого ? Почему бы вам не проверить это — простое выпадающее меню «Дизайн муравьев»

2. Я использую antd-дизайн. Мой вопрос заключался в том, что при наведении курсора на любое выпадающее значение, например «Люси», я должен был записывать зависшее значение, а не щелкать.

3. Что вы подразумеваете под «считыванием значения»? Означает ли это, что при наведении курсора мыши на опцию вы должны запустить handleChange функцию и сохранить выбранное значение?

Ответ №1:

Я думаю, что это не поддерживается antd select из коробки, но вы можете поймать события мыши, например, добавив OnMouseEnter к каждому параметру выбора antd.

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

Вот работает стекблитц.

Полный код из 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'));
Метки: