我如何通过 react.js 中的 onMouseEnter() 事件触发 onClick() 事件

Question

我想从以下函数触发 onClick()：

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

<NavDropdown onMouseEnter={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>

Answer 1

你为什么要这样做？ .这可能不会让您的用户有机会随意点击。如果您仍然想继续实施它，这里有一个钩子可以完全满足您的需求

https://usehooks.com/useHover/

Answer 2

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;

我如何通过 react.js 中的 onMouseEnter() 事件触发 onClick() 事件

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

reactjs

react-bootstrap