React.js中如何通过onMouseEnter事件触发onClick事件

方案1：直接模拟DOM点击事件（最快捷） #

如果你用的是React Bootstrap等常用组件库的NavDropdown，可以直接通过ref绑定组件根元素，调用原生click()方法触发点击：

import { useRef } from 'react';

function YourComponent() {
  // 绑定NavDropdown的ref
  const navDropdownRef = useRef(null);

  function triggerClick(e) {
    // 可选链避免ref未绑定时报错
    navDropdownRef.current?.click();
  }

  return (
    <NavDropdown ref={navDropdownRef} 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>
  )
}

方案2：受控组件实现（更符合React最佳实践） #

直接通过状态控制下拉框的展开/收起，不需要模拟事件，逻辑更可控：

import { useState } from 'react';

function YourComponent() {
  // 控制下拉框展示状态
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  function triggerClick() {
    setIsDropdownOpen(true);
  }

  // 绑定组件自带的toggle事件，适配点击、键盘关闭等原生交互
  function handleToggle(nextState) {
    setIsDropdownOpen(nextState);
  }

  return (
    <NavDropdown 
      show={isDropdownOpen}
      onToggle={handleToggle}
      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>
  )
}

注意事项 #

• 如果你的点击逻辑本身是独立的函数，直接在triggerClick内调用该函数即可，不需要额外模拟事件触发
• 注意避免事件循环：如果点击事件本身会再次触发mouseEnter，可以加状态标记或者防抖逻辑规避无限触发

内容的提问来源于stack exchange，提问作者Shakhawat Hossain SHIHAB