I just read some tutorials about reactjs, and I found this solution.
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 HoverHandlers mixin is like (you can also add handlers for :active :focus, etc...):
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.