Javascript react.js 中的悬停按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28072196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
a hover button in react.js
提问by Widy Gui
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
我想问一下如何制作一个按钮，但是当鼠标在按钮上（悬停）时，新按钮显示在上一个按钮上方......它在 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);
回答by Randy Morris
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?
如果我理解正确，您正在尝试创建一个全新的按钮。为什么不像@André Pena 建议的那样更改按钮的标签/样式？
Here is an example:
下面是一个例子：
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);
Live demo: http://jsfiddle.net/rz2t224t/2/
回答by Brigand
You should probably just use CSS for this, but if you insist on doing it in JS you simply set flag in state to true in your onMouseEnter, and set the same flag to false in onMouseLeave. In render you render the other button if the flag is true.
您可能应该为此使用 CSS，但如果您坚持在 JS 中执行此操作，您只需在 onMouseEnter 中将 state 中的标志设置为 true，并在 onMouseLeave 中将相同的标志设置为 false。在渲染中，如果标志为真，则渲染另一个按钮。
Nothing fancy or complicated involved.
没有什么花哨或复杂的事情。
回答by vothaison
I just read some tutorials about reactjs, and I found this solution.
我刚刚阅读了一些关于 reactjs 的教程，我找到了这个解决方案。
For the sake of reuseability, and to separate out the "hover" logic, you can create a component to replace your normal tag.
为了可重用性，并分离出“悬停”逻辑，您可以创建一个组件来替换您的普通标签。
Something like this:
像这样的东西：
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;
The HoverHandlersmixin is like (you can also add handlers for :active :focus, etc...):
该HoverHandlers混入像（你也可以添加处理程序：活跃：焦点等）：
var React = require('react');
var HoverHandlers = {
mouseOver: function (e) {
this.setState({ hover: true });
},
mouseOut: function (e) {
this.setState({ hover: false });
},
};
module.exports = HoverHandlers;
You then can use the component like this:
然后，您可以像这样使用该组件：
<ElementHover tagName="button" hoverClass="hover" initialClasses="btn btn-default" >
Label or content of the button
</ElementHover>
The code might need to be optimized. So, many thanks to anyone can help me about that.
代码可能需要优化。所以，非常感谢任何人可以帮助我。
