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中将相同的flag设置为false。在渲染中，如果标志为真，则渲染另一个按钮。

没有任何花哨或复杂的事情。

Answer 3

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

为了重复使用，并将＆＃34; hover＆＃34;逻辑，您可以创建一个组件来替换您的普通标签。

这样的事情：

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>

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

react.js中的悬停按钮

3 个答案: