react.js中的悬停按钮 [英] a hover button in react.js

问题描述

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

i would like to ask how to make a button but when the mouse is on the button (hover),the new button is displayed above the previous button... and it's in react.js.. thx

这是我的代码的方式..

this is the way of my code..

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);

推荐答案

如果我理解正确你试图创建一个全新的按钮。为什么不改变按钮的标签/样式@AndréPena建议？

If I understand correctly you're trying to create a whole new button. Why not just change the label/style of the button as @André Pena suggests?

这是一个例子：

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/

这篇关于react.js中的悬停按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！