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

JavaScript

达蒙猴子

2020-03-12

进行内联样式设置时，如何在ReactJS中实现悬停事件或活动事件？

我发现onMouseEnter和onMouseLeave方法存在问题，因此希望有另一种方法可以做到。

具体来说，如果您将鼠标悬停在组件上非常快，则仅会注册onMouseEnter事件。onMouseLeave永远不会触发，因此无法更新状态...使该组件看起来好像仍在悬停。如果您尝试模仿“：active” css伪类，我会注意到同样的事情。如果单击得非常快，则只会注册onMouseDown事件。onMouseUp事件将被忽略...使组件保持活动状态。

这是显示问题的JSFiddle：https ://jsfiddle.net/y9swecyu/5/

有问题的JSFiddle视频：https ://vid.me/ZJEO

代码：

var Hover = React.createClass({
    getInitialState: function() {
        return {
            hover: false
        };
    },
    onMouseEnterHandler: function() {
        this.setState({
            hover: true
        });
        console.log('enter');
    },
    onMouseLeaveHandler: function() {
        this.setState({
            hover: false
        });
        console.log('leave');
    },
    render: function() {
        var inner = normal;
        if(this.state.hover) {
            inner = hover;
        }

        return (
            <div style={outer}>
                <div style={inner}
                    onMouseEnter={this.onMouseEnterHandler}
                    onMouseLeave={this.onMouseLeaveHandler} >
                    {this.props.children}
                </div>
            </div>
        );
    }
});

var outer = {
    height: '120px',
    width: '200px',
    margin: '100px',
    backgroundColor: 'green',
    cursor: 'pointer',
    position: 'relative'
}

var normal = {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
    opacity: 0
}

var hover = {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
    opacity: 1
}

React.render(
    <Hover></Hover>,         
    document.getElementById('container')
)

第1348篇《您如何在ReactJS中悬停？-在快速悬停过程中未注册onMouseLeave》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
Tom小卤蛋 2020.03.13

我可以建议您一个易于理解的示例，我在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>
  )
}
樱Itachi 2020.03.13

我知道自问这个问题以来已经有一段时间了，但是我遇到了与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>
  )
}
逆天理查德 2020.03.13

我会使用onMouseOver和onMouseOut。React原因

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

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

启人Green 2020.03.13

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

JimHarry 2020.03.13

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

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

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

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

猿Green 2020.03.13

你有没有尝试过这些？

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

综合事件

它还提到以下内容：

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

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

NearL 2020.03.13

先前的答案非常令人困惑。您不需要反应状态来解决此问题，也不需要任何特殊的外部库。可以使用纯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>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android