您如何在ReactJS中悬停？-在快速悬停过程中未注册onMouseLeave

我可以建议您一个易于理解的示例，我在React JS中使用情感来赋予样式。在这里您可以找到有关它的更多信息https://emotion.sh/docs/introduction希望对您有所帮助。

const secondStyle = css`
  background: blue;
  height: 20px;
  width: 20px;
  :hover {
    cursor: pointer;
    background: red;
`

function myComponent() {
  return (
     <div className={firstStyle}>
       <button className={secondStyle}>Submit<button>
  )
}

我知道自问这个问题以来已经有一段时间了，但是我遇到了与onMouseLeave（）不一致的同一问题，我所做的就是将onMouseOut（）用于下拉列表，并在整个菜单上使用鼠标离开可靠，并且每次测试都可以使用。我在文档中看到了这里的事件：https : //facebook.github.io/react/docs/events.html#mouse-events 这是使用https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp的示例：

handleHoverOff(event){
  //do what ever, for example I use it to collapse the dropdown
  let collapsing = true;
  this.setState({dropDownCollapsed : collapsing });
}

render{
  return(
    <div class="dropdown" onMouseLeave={this.handleHoverOff.bind(this)}>
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu" onMouseOut={this.handleHoverOff.bind(this)}>
        <li><a href="#">bla bla 1</a></li>
        <li><a href="#">bla bla 2</a></li>
        <li><a href="#">bla bla 3</a></li>
      </ul>
    </div>
  )
}

我会使用onMouseOver和onMouseOut。React原因

onMouseEnter和onMouseLeave事件从剩下的元素传播到要输入的元素，而不是普通的冒泡事件，并且没有捕获阶段。

这是在React 文档中的鼠标事件。

您可以使用onMouseOver={this.onToggleOpen}和 onMouseOut={this.onToggleOpen}在组件上反复思考

如果您可以制作一个展示onMouseEnter / onMouseLeave或onMouseDown / onMouseUp错误的小演示，那么将其发布到ReactJS的问题页面或邮件列表中是值得的，只是要提一个问题并听听开发人员对此有何评论。

在您的用例中，您似乎暗示CSS：hover和：active状态足以满足您的目的，因此我建议您使用它们。由于CSS是直接在浏览器中实现的，因此CSS比Javascript更快，更可靠。

但是，：hover和：active状态不能以内联样式指定。您可以做的是为您的元素分配一个ID或一个类名，然后在样式表（如果它们在您的应用程序中有些恒定）或动态生成的<style>标签中编写样式。

这是后一种技术的示例：https : //jsfiddle.net/ors1vos9/

你有没有尝试过这些？

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

综合事件

它还提到以下内容：

反应规格化的事件，让他们有不同的浏览器一致的性质。

下面的事件处理程序由冒泡阶段中的事件触发。要为捕获阶段注册事件处理程序，请将Capture附加到事件名称；例如，您可以使用onClickCapture来处理捕获阶段中的click事件，而不是使用onClick。

先前的答案非常令人困惑。您不需要反应状态来解决此问题，也不需要任何特殊的外部库。可以使用纯CSS / ass来实现：

风格：

.hover {
  position: relative;

  &:hover &__no-hover {
    opacity: 0;
  }

  &:hover &__hover {
    opacity: 1;
  }

  &__hover {
    position: absolute;
    top: 0;
    opacity: 0;
  }

  &__no-hover {
    opacity: 1;
  }
}

反应组件

一个简单的Hover纯渲染功能：

const Hover = ({ onHover, children }) => (
    <div className="hover">
        <div className="hover__no-hover">{children}</div>
        <div className="hover__hover">{onHover}</div>
    </div>
)

用法

然后像这样使用它：

    <Hover onHover={<div> Show this on hover </div>}>
        <div> Show on no hover </div>
    </Hover>