How I can trigger a onClick() event by onMouseEnter() event in react.js-CodePudding

I want to trigger onClick() from the below function:

function triggerClick(e) {
   //want to trigger onCLick() event here
}

<NavDropdown onm ouseEnter={triggerClick}>
    <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
    <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
    <NavDropdown.Divider />
    <NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
</NavDropdown>

CodePudding user response：

Why would you want to do that ? . This probably may not give your users the chance to click at their will. If you still want to go ahead and implement that, here is a hook that does exactly what you want

https://usehooks.com/useHover/

CodePudding user response：

import React, { useState } from 'react';

import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';

import './App.css';

const App = () => {

  const triggerClick = () => {
    const navDropdownWrapper = document.getElementById("basic-nav-dropdown");
    navDropdownWrapper.click();
    navDropdownWrapper.addEventListener('click', (evt) => {
      console.log(evt)
    })
  };

  return ( 
    <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Link</Nav.Link>
              <NavDropdown title="Dropdown" id="basic-nav-dropdown" onMouseEnter={triggerClick}>
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
   );
}
 
export default App;