react.js 中的悬停按钮

Posted 2023-02-22

【中文标题】react.js 中的悬停按钮

【英文标题】：a hover button in react.js

【发布时间】：2015-03-20 06:23:27

【问题描述】：

我想问一下如何制作一个按钮但是当鼠标在按钮上（悬停）时，新按钮显示在前一个按钮上方......并且它在react.js中......谢谢

这是我的代码的方式..

var Category = React.createClass(displayName: 'Category',
  render: function () 
      return (
        React.createElement("div", className: "row", 
        React.createElement("button", null, "Search",   OnMouseEnter://I have no idea until here)
      )
    );
  
);

React.render(React.createElement(Category), contain);

【问题讨论】：

在我看来你真的不想创建另一个按钮..你可能只是想改变当前按钮的样式/行为

对不起，这是我当前的代码：

我需要知道如何使用onMouseEnter函数

@Randy Morris 有正确答案，但为什么不为您的 div 和按钮使用 JSX（类似 html）语法？

【参考方案1】：

如果我理解正确，您正在尝试创建一个全新的按钮。为什么不按照@André Pena 的建议更改按钮的标签/样式？

这是一个例子：

var HoverButton = React.createClass(
    getInitialState: function () 
        return hover: false;
    ,

    mouseOver: function () 
        this.setState(hover: true);
    ,

    mouseOut: function () 
        this.setState(hover: false);
    ,

    render: function() 
        var label = "foo";
        if (this.state.hover) 
            label = "bar";
        
        return React.createElement(
            "button",
            onMouseOver: this.mouseOver, onMouseOut: this.mouseOut,
            label
        );
    
);

React.render(React.createElement(HoverButton, null), document.body);

现场演示：http://jsfiddle.net/rz2t224t/2/

【讨论】：

感谢@Randy Morris，但我需要做的是在悬停时在前一个按钮上方创建一个新按钮..而不是更改标签..

@WidyGui 你能解释一下原因吗？

我已经更新了 Randy 的示例：jsfiddle.net/pqr/rz2t224t/3 - 现在它在上方显示了附加按钮。

@Petr 啊，我可能把“上面”误认为是“在上面”。鉴于 OPs cmets 这可能是他正在寻找的，您应该将其发布为自己的答案。

@RandyMorris 我需要在功能性 React 组件中实现它。你能告诉我如何实现它

【参考方案2】：

您可能应该为此只使用 CSS，但如果您坚持在 JS 中这样做，您只需在 onMouseEnter 中将 state 中的标志设置为 true，并在 onMouseLeave 中将相同的标志设置为 false。如果标志为真，则在渲染中渲染另一个按钮。

没有任何花哨或复杂的内容。

【讨论】：

我在使用这个时遇到了问题。我在跟踪悬停状态的 div 顶部有一个菜单。从菜单中选择一个条目后，弹出框会消失，但由于我没有移动鼠标，因此不会触发 onMouseLeave 事件。使用 onMouseOver 和 onMouseOut 似乎已经解决了这个问题。

【参考方案3】：

我不确定您何时希望仅在第二个按钮悬停时才显示第一个按钮（上图）。如果鼠标悬停从第二个按钮移除，第一个按钮将再次消失。但我想问题是展示它并使其具有交互性。

在 React 中，你会使用 state 来做这件事。在功能性 React 组件中，useState 钩子是最佳选择。按钮上的onMouseOver 事件通过调用setShowButtons 函数更改悬停时的状态变量。我通常根据变量（本例中为showButtons）切换 CSS 类，但也可以在本例中使用条件渲染作为按钮 #3。

当按钮 #2 悬停时显示上面的按钮 #1 也可以仅使用 CSS。在此示例中，使用 flex-box（颠倒两个按钮的顺序）和同级选择器 (~)。

const App = () => 
  const [showButtons, setShowButtons] = React.useState(false);
  return (
    <main className="main-container">
      <h4>Show buttons with React state</h4>
      <button className=showButtons ? "button" : "button _hide">
        #1. I'm shown with a CSS transition when #2 is hovered
      </button>
      <button
        className="button"
        onMouseOver=() => setShowButtons(true)
        onFocus=() => setShowButtons(true)
        onMouseOut=() => setShowButtons(false)
        onBlur=() => setShowButtons(true)
      >
        #2. Hover me to show #1 and #3 button
      </button>
      showButtons && (
        <button className="button">
           #3. I'm rendered when #2 is on hovered
        </button>
      )
      <hr />
      <h4>Show button with CSS only</h4>
      <div className="reversed-container">
        <button className="button-2">#2. Hover me to show button #1</button>
        <button className="button-2 _hide">
          #1. I'm shown with a CSS transition when #2 is hovered
        </button>
      </div>
    </main>
  );
;

ReactDOM.render(<App />, document.getElementById("root"));

.main-container 
  display: flex;
  flex-direction: column;


.reversed-container 
  display: flex;
  flex-direction: column-reverse;


hr 
  width: 100%;
  margin-top: 1rem;


.button,
.button-2 
  padding: 1rem;
  transition: opacity 1s;


.button._hide,
.button-2._hide 
  opacity: 0;
  pointer-events: none;



.button:hover,
.button-2:hover 
  opacity: 1;
  pointer-events: initial;
  background-color: lightyellow;


.button-2:hover ~ .button-2._hide 
  opacity: 1;
  pointer-events: initial;
  background-color: lightyellow;

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<div id="root"></div>

【参考方案4】：

这是我的基于功能的组件的解决方案。我假设您正在寻找更改“鼠标悬停”事件按钮的颜色。不过，您可以按照我的代码使用任何东西。

请将 useState 和 useEffect hook 导入为

import React, useState, useEffect from 'react';

现在，将状态设为：-

const [hover, setHover] = useState(false);

定义你想在鼠标悬停上渲染的颜色，我在这里定义原色和mouseOverColor。

let primaryColor:red
let mouseOverColor:blue

现在在 Reactjs 的 JSX 中。

return (<div>

<Button
      
      style=backGroundColor: hover === true ? mouseOverColor : primaryColor
      onMouseOver=(e) => 
        e.preventDefault();
        setHover(true);
      
      onMouseLeave=(e) => 
        e.preventDefault();
        setHover(false);
      
    >
      Say hi
    </Button>

</div>)

请确保将 useEffect 依赖项与“hover”属性一起使用，以便在组件获得鼠标悬停效果时刷新背景颜色：-

  useEffect(() => , [hover]);

注意：- 我使用 Material UI 的按钮，你也可以使用纯 HTML 按钮。

import Button from '@material-ui/core';

结果：- 通常按钮为 红色，而在 鼠标悬停 上，它应该为 红色，反之亦然。 差不多就这些了。

【参考方案5】：

我刚刚阅读了一些关于 react.js 的教程，我找到了这个解决方案。

为了可重用性和分离“悬停”逻辑，您可以创建一个组件来替换您的普通标签。

类似这样的：

var React = require('react');
var classNames = require('classnames');
var HoverHandlers = require('./HoverHandlers.jsx');

var ElementHover = React.createClass(
  mixins: [HoverHandlers],

  getInitialState: function () 
    return  hover: false ;
  ,

  render: function () 
    var hoverClass = this.state.hover ? this.props.hoverClass : '';
    var allClass = classNames(this.props.initialClasses, hoverClass);

    return (
      <this.props.tagName 
                          className=allClass 
                          onMouseOver=this.mouseOver 
                          onMouseOut=this.mouseOut>
        this.props.children
      </this.props.tagName>
    );
  

);

module.exports = ElementHover;

HoverHandlers mixin 就像（您还可以为 :active :focus 等添加处理程序）：

var React = require('react');

var HoverHandlers = 
  mouseOver: function (e) 
    this.setState( hover: true );
  ,
  mouseOut: function (e) 
    this.setState( hover: false );
  ,
;  
module.exports = HoverHandlers;

然后你可以像这样使用组件：

<ElementHover tagName="button" hoverClass="hover" initialClasses="btn btn-default" >
          Label or content of the button
</ElementHover>

代码可能需要优化。所以，非常感谢任何可以帮助我的人。