How to close drop list using jquery?-CodePudding

I have a dropdown list and when hover on it, it open, when I not hover on it, it close. I've tried to use onm ouseDown, onm ouseOut, but it doen't work as I expected, so I'm trying to use jquery but I don't know why it not working, pls help me

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";
import { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import $ from "jquery";

function AppDropDown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen((prevState) => !prevState);

  const show = () => setDropdownOpen(true);

  const hide = () => setDropdownOpen(false);

  if ($("#list:hover").length !== 0) {
    if (dropdownOpen === true) setDropdownOpen(false);
  }

  return (
    <div onm ouseOver={show} id="list">
      <Dropdown isOpen={dropdownOpen} toggle={toggle}>
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <div>
          <DropdownMenu className="mt-4">
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem>Some Action</DropdownItem>
            <DropdownItem text>Dropdown Item Text</DropdownItem>
            <DropdownItem disabled>Action (disabled)</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Foo Action</DropdownItem>
            <DropdownItem>Bar Action</DropdownItem>
            <DropdownItem>Quo Action</DropdownItem>
          </DropdownMenu>
        </div>
      </Dropdown>
    </div>
  );
}

export default AppDropDown;

CodePudding user response：

I don't see any issue here. Can you try removing this jQuery part.

if ($("#list:hover").length !== 0) {
    if (dropdownOpen === true) setDropdownOpen(false);
  }

See the snippet.

const {useState} = React;
const {Dropdown,DropdownToggle, DropdownMenu,DropdownItem } = Reactstrap;


function AppDropDown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen((prevState) => !prevState);

  return (
    <div
      onm ouseEnter={() => setDropdownOpen(true)}
      onm ouseLeave={() => setDropdownOpen(false)}
      id="list"
    >
      <Dropdown isOpen={dropdownOpen} toggle={toggle}>
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <div>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem>Some Action</DropdownItem>
            <DropdownItem text>Dropdown Item Text</DropdownItem>
            <DropdownItem disabled>Action (disabled)</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Foo Action</DropdownItem>
            <DropdownItem>Bar Action</DropdownItem>
            <DropdownItem>Quo Action</DropdownItem>
          </DropdownMenu>
        </div>
      </Dropdown>
    </div>
  );
}

const App = () => {
    return (
        <div>
           <AppDropDown/>
        </div>
    );
};

// Render it

ReactDOM.render(
<App/>,
    document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.5.1/reactstrap.full.js" ></script>
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="root"></div>