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