web-dev-qa-db-ja.com

react.jsのホバーボタン

ボタンの作り方を尋ねたいのですが、マウスがボタンの上にあるとき（ホバー）、新しいボタンが前のボタンの上に表示されます...そして、react.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);
javascriptjquerycssreactjs
20
Widy Gui

私が正しく理解していれば、まったく新しいボタンを作成しようとしています。 @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/

45
Randy Morris

これにはおそらくCSSを使用する必要がありますが、JSでそれを行うことを主張する場合は、onMouseEnterでflagの状態をtrueに設定し、onMouseLeaveで同じフラグをfalseに設定するだけです。フラグがtrueの場合、レンダリングで他のボタンをレンダリングします。

派手なものや複雑なものは一切関与しません。

10
Brigand