web-dev-qa-db-fra.com

un bouton de survol dans react.js

je voudrais demander comment faire un bouton mais quand la souris est sur le bouton (survoler), le nouveau bouton est affiché au dessus du bouton précédent ... et il est en react.js .. thx

c'est la voie de mon code ..

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);
javascriptjquerycssreactjs
20
Widy Gui

Si je comprends bien, vous essayez de créer un tout nouveau bouton. Pourquoi ne pas simplement changer l'étiquette/le style du bouton comme le suggère @ André Pena?

Voici un exemple:

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

Démo en direct: http://jsfiddle.net/rz2t224t/2/

45
Randy Morris

Vous devriez probablement utiliser CSS pour cela, mais si vous insistez pour le faire dans JS, vous définissez simplement flag in state sur true dans votre onMouseEnter, et définissez le même flag sur false dans onMouseLeave. Dans le rendu, vous rendez l'autre bouton si le drapeau est vrai.

Rien de compliqué ni de compliqué.

10
Brigand