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

Question

Я хотел бы спросить, как сделать кнопку, но когда мышь находится на кнопке (наведите указатель мыши), новая кнопка отображается над предыдущей кнопкой ... и она находится в файле 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); 

Answer 1

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

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

Answer 2

Если я правильно понимаю, вы пытаетесь создать совершенно новую кнопку. Почему бы просто не изменить ярлык/стиль кнопки, как предлагает @ 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 3

Я только что прочитал некоторые учебники о reactjs, и я нашел это решение.

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

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

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; 

The HoverHandlers Mixin является как (вы также можете добавить обработчик для: активный: фокуса, и т.д ...):

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> 

Код mig ht необходимо оптимизировать. Поэтому большое спасибо, что кто-нибудь может мне помочь в этом.