react.js中的hover按钮

我想问一下如何制作一个按钮但是当鼠标在按钮上时（hover），新按钮显示在上一个按钮上方…并且它位于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，则渲染另一个按钮。

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

Answer 3

我刚读了一些关于reactjs的教程，我发现了这个解决方案。

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

像这样的东西：

 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.children}  ); } }); 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; 

然后，您可以使用这样的组件：

  Label or content of the button  

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