Кнопка наведения в response.js

Я хотел бы спросить, как сделать кнопку, но когда мышь находится на кнопке (наведите указатель мыши), новая кнопка отображается над предыдущей кнопкой... и она в файле response.js.. спасибо

это способ моего кода.

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

Ответ 1

Если я правильно понимаю, вы пытаетесь создать целую новую кнопку. Почему бы просто не изменить ярлык/стиль кнопки, как предлагает @Андре Пена?

Вот пример:

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

Live demo: http://jsfiddle.net/rz2t224t/2/

Ответ 2

Вероятно, вы должны просто использовать CSS для этого, но если вы настаиваете на том, чтобы делать это в JS, вы просто устанавливаете флаг в состоянии true в свой onMouseEnter и устанавливаете тот же флаг в false в onMouseLeave. В рендере вы показываете другую кнопку, если флаг имеет значение true.

Ничего необычного или сложного.

Ответ 3

Я только что прочитал несколько руководств об ответах, и я нашел это решение.

Для повторного использования и для выделения логики "зависания" вы можете создать компонент для замены обычного тега.

Что-то вроде этого:

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 похож на (вы также можете добавить обработчики для: 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>

Возможно, код должен быть оптимизирован. Поэтому большое спасибо каждому, кто может мне помочь в этом.