react.js中的悬停按钮
问题描述：
我想问一下如何制作一个按钮，但是当鼠标在按钮上时（悬停），新按钮显示在上一个按钮上方...并且它位于react.js .. thx
i would like to ask how to make a button but when the mouse is on the button (hover),the new button is displayed above the previous button... and it's in react.js.. thx
这是我的代码的方式..
this is the way of my 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);
答
如果我理解正确你试图创建一个全新的按钮。为什么不改变按钮的标签/样式@AndréPena建议？
If I understand correctly you're trying to create a whole new button. Why not just change the label/style of the button as @André Pena suggests?
这是一个例子：
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);