Блог

Главная - Вопросы по программированию - Как я могу вызвать событие onClick() с помощью события OnMouseEnter() в react.js

Как я могу вызвать событие onClick() с помощью события OnMouseEnter() в react.js

#reactjs #react-bootstrap

Вопрос:

Я хочу вызвать 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>

Ответ №1:

 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;

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

1. спасибо вам за ваше простое решение.

2. Добро пожаловать @shakhawathossainshhab

Ответ №2:

Почему ты хочешь это сделать ? . Это, вероятно, может не дать вашим пользователям возможности нажимать по своему желанию. Если вы все еще хотите продолжить и реализовать это, вот крючок, который делает именно то, что вы хотите

https://usehooks.com/useHover/

Метки: