Javascript 如何使react bootstrap'；鼠标悬停时下拉菜单是否打开？

好的，问题很简单。我需要在鼠标悬停而不是单击时打开下拉列表

目前我的代码如下

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

isOpen=true}
open={isOpen}
诺卡雷特
id=“语言切换器容器”
>
只有一项

如您所见，我尝试了MouseCenter，但没有效果。有人能解决这个问题吗？我应该传递什么属性来实现这一点

API页面在这里

您可以使用以下JS复制它

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

或者你也可以安装这样的插件

编辑：非常好的引导解决方案，但我注意到现在你说它是react，我以前没有用过，但我不明白为什么上面的js即使需要调整也不能工作{

export class Nav extends React.Component {

  constructor(props) {
    super(props)
    this.state = { isOpen: false }
  }

  handleOpen = () => {
    this.setState({ isOpen: true })
  }

  handleClose = () => {
     this.setState({ isOpen: false })
  }

  render() {
    return (
       <Nav>
        <NavDropdown
          onMouseEnter = { this.handleOpen }
          onMouseLeave = { this.handleClose }
          open={ this.state.isOpen }
          noCaret
          id="language-switcher-container"
        >
          <MenuItem>Only one Item</MenuItem>
        </NavDropdown>
      </Nav>
    )
  }
}

建造师（道具）{ 超级（道具） this.state={isOpen:false} } handleOpen=（）=>{ this.setState（{isOpen:true}） } handleClose=（）=>{ this.setState（{isOpen:false}） } render（）{ 返回( 只有一项 ) } }

---

希望这能解决您的问题。

这里有一个更干净的纯CSS解决方案：

。下拉：悬停。下拉菜单{
显示：块；
}

这似乎是一个黑客解决方案，但这是更新后保持我的应用程序运行的最简单方法

对于最新更新，单击按钮后才会呈现

下拉菜单

我在我的css中使用了以下内容：

.dropdown:hover .dropdown-menu {
    display: block;
}

并将其添加到我的组件中

  componentDidMount() {
    // TODO: Fix so menu renders automatically w/out click
    const hiddenNavToggle = document.getElementById('navbar__hamburger_wrapper-hidden_click')
    hiddenNavToggle.click()
    hiddenNavToggle.click()
  }

我添加了一个具有给定id的包装div，只是为了单击此处

---

我很想听到另一个解决方案。

基于@Rei Dien的答案

   onMouseEnter = { this.handleOpen.bind(this) }
   onMouseLeave = { this.handleClose.bind(this) }

---

我自己刚刚遇到这个问题，我发现您需要引导CSS和react引导的参数。添加以下CSS：

.dropdown:hover>.dropdown-menu {
  display: block;
}

然后需要添加参数

rendermenunmount={true}

，以便在加载时呈现子元素：

<NavDropdown renderMenuOnMount={true}>
  <NavDropdown.Item href="#">Item #1</NavDropdown.Item>
</NavDropdown>

项目#1

就这么简单：）

document.getElementById（“idofthiselement”）。单击（）}onMouseLeave={（e）=>document.getElementById（“idofthiselement”）。单击（）}title=“Others”id=“idofthiselement”>

受其启发，以下是如何使用React挂钩实现此目的

export const Menu = () => {
  const [menuOpen, toggleMenuOpen] = useState(false);

  return (
    <Dropdown
      onMouseEnter={() => {
        toggleMenuOpen(true);
      }}
      onMouseLeave={() => {
        toggleMenuOpen(false);
      }}
      show={menuOpen}
    >
      <Dropdown.Toggle>
        Menu
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#">Menu!!!</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

导出常量菜单=（）=>{
const[menuOpen，toggleMenuOpen]=useState（false）；
返回(
{
切换菜单打开（真）；
}}
onMouseLeave={（）=>{
切换菜单打开（假）；
}}
show={menuOpen}
>
菜单
菜单！！！
);
};

另一种方法

const HoverDropDown = ({ children, ...rest }) => {
   const [show, setShow] = useState(false);

   return (
      <NavDropdown {...rest} show={show} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
         {children}
      </NavDropdown>
   );
}

<Nav>
   <HoverDropDown id="language-switcher-container" title="Menu">
      <Dropdown.Item>Item 1</Dropdown.Item>
   </HoverDropDown>         
</Nav>

consthoverdropdown=（{children，…rest}）=>{
const[show，setShow]=useState（false）；
返回(
setShow（true）}onMouseLeave={（）=>setShow（false）}>
{儿童}
);
}
项目1

谢谢您的帮助，是的，我正在使用bootstrap，因此这样做可能不是一个好主意，就像我说的，我不熟悉react，但我使用bootstrap。如果你在自己的js文件中弹出该代码，并确保你有一个.dropdown菜单等使其工作，那么我不明白为什么这不是一个好主意？使用jQuery操作DOM违背了使用React-组件库的全部目的。首先，如果你需要一个组件重新渲染，你需要设置一个新的状态或新的道具。您可以通过向state添加isOpen来实现您的目标，然后在mouseinteryes上调用setState，我采用了与您建议的完全相同的代码！！谢谢你的帮助！再次感谢，它很有效。我想我需要改变主意，从传统的前端到状态控制的渲染技术。prop

open

不再存在，它已被重命名为

show

此技术将打开页面上的所有下拉菜单。您如何将此限制为一个特定的下拉列表？或者将鼠标悬停在整个页面的多个其他下拉列表上？对不同的下拉列表使用不同的状态它不应该是可接受的答案。只需尝试将鼠标移到下拉菜单元素上-下拉菜单再次关闭。@rbtbar，是否使用嵌套菜单？我在没有嵌套菜单的情况下进行了测试，效果很好。“react bootstrap”：“^0.32.4”这在较新版本中不起作用，下拉列表在第一次单击之前不会呈现。您需要先触发onclick，然后才能通过css进行控制

const HoverDropDown = ({ children, ...rest }) => {
   const [show, setShow] = useState(false);

   return (
      <NavDropdown {...rest} show={show} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
         {children}
      </NavDropdown>
   );
}

<Nav>
   <HoverDropDown id="language-switcher-container" title="Menu">
      <Dropdown.Item>Item 1</Dropdown.Item>
   </HoverDropDown>         
</Nav>