☰

react.jsのホバーボタン 質問する

tag-icon • tag-icon javascript jquery css reactjs
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);

ベストアンサー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/

おすすめ記事