react.js中的悬停按钮

Question

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

这是我的代码的方式..

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

Answer 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/

Answer 2

您应该只使用CSS,但如果您坚持在JS中执行此操作,则只需在onMouseEnter中将flag in state设置为true,并在onMouseLeave中将相同的标志设置为false.在渲染中,如果标志为true,则渲染另一个按钮.

没有任何花哨或复杂的参与.