时间戳

首页 > 解决方案 > 将鼠标悬停在选项上时反应选择，打开子菜单

reactjs - 将鼠标悬停在选项上时反应选择，打开子菜单

问题描述

我正在尝试使用 React-select 在主菜单中构建一个子菜单，它应该是这样的：

文本

将鼠标悬停在主菜单中的选项上时，它会触发子菜单在侧面打开。

有没有办法使用 react-select 做到这一点？我找不到任何关于此的示例或文档，是否有类似 ```optionOnMouseover`` 的功能呢？先感谢您！

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];
...

<Select
    value={...}
    onChange={...}
    options={options}
 />```

标签： reactjsreact-select

解决方案

这是点击，但如果你需要悬停，只需修改它

import React, { useState } from "react";

import ReactDOM from "react-dom";
import Select, { components } from "react-select"

const CustomOption = (props) => {
  const [submenu, setSubmenu] = useState(false)
  const [height, setHeight] = useState(0)
  const handleOption = (e) => {
    if(submenu) {
      setSubmenu(false)  
    } else {
      setHeight(e.clientY)
      setSubmenu(true)  
    }
    
  }
  const handleSubOption = (e) => {
    console.log('clicked')
  }
  const { data } = props;
  return data.custom ? (
    <>
      <div onClick={handleOption} className="customs">
        {data.label} <span className="caret"/>
          {
            submenu && (
              <div className="dropdown-submenu">
                <div className="drops" onClick={handleSubOption}>
                  Test dropdown 1
                </div>
                <div className="drops" onClick={handleSubOption}>
                  Test dropdown 2
                </div>
                <div className="drops" onClick={handleSubOption}>
                  Test dropdown 3
                </div>
              </div>
            )
          }
      </div>
      <style jsx>{`
        .customs {
          height: 36px;
          padding: 8px;
          position: relative;
        }
        
        .drops {
          height: 36px;
          padding: 8px;
        }

        .customs:hover, .drops:hover {
          background-color: #17cf76;
        }

        .dropdown-submenu {
          position: fixed;
          top: ${height - 10}px;
          left: 410px;
          min-height: 36px;
          overflow: auto;
          border: 1px solid hsl(0,0%,80%);
          border-radius: 4px;
          color: #212529;
        }
      `}</style>
    </>
  ) : (
    <components.Option {...props} />
  );
};

const options = [
  { custom: true, label: "I'm a custom link", value: "cust" }
];

function App() {
  return (
    <>
      <Select classNamePrefix="category-select" className="w-30" components={{ Option: CustomOption }} options={options} />
      <style jsx global>{`
        * {
          font-family: sans-serif;
          text-align: center;
        }
        .w-30 {
          width: 30% !important;
        }
      `}</style>
    </>
  )
}

export default App

推荐阅读