我想问一下如何制作一个按钮,但是当鼠标在按钮上时(悬停),新按钮显示在上一个按钮上方...并且它位于react.js .. thx
这是我的代码的方式..
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);
答案 0 :(得分:45)
如果我理解正确,你正试图创建一个全新的按钮。为什么不像@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);
答案 1 :(得分:10)
你应该只使用CSS,但是如果你坚持在JS中这样做,你只需在你的onMouseEnter中将flag in state设置为true,并在onMouseLeave中将相同的flag设置为false。在渲染中,如果标志为真,则渲染另一个按钮。
没有任何花哨或复杂的事情。
答案 2 :(得分:-1)
我刚读了一些关于reactjs的教程,我发现了这个解决方案。
为了重复使用,并将" hover"逻辑,您可以创建一个组件来替换您的普通标签。
这样的事情:
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;
HoverHandlers mixin就像(你也可以为:active:focus等添加处理程序......):
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>
可能需要优化代码。所以,非常感谢任何人可以帮助我。