Menu
The click event works fine, but the onmouseover event does not work.
ProfImage = React.createClass({
getInitialState: function() {
return { showIcons: false };
},
onClick: function() {
if(this.state.showIcons == true) {
this.setState({ showIcons: false });
}
else {
this.setState({ showIcons: true });
}
},
onHover: function() {
this.setState({ showIcons: true });
},
render: function() {
return (
<div>
<span className="major">
<img src="/images/profile-pic.png" height="100" onClick={this.onClick} onmouseover={this.onHover} />
</span>
{ this.state.showIcons ? <SocialIcons /> : null }
</div>
);
}
});
382
We do this by adding onMouseOver to the button element. After declaring that this element has an onMouseEnter event handler, we can choose what function we want to trigger when the cursor hovers over the element. We declare a function called changeBackground above the view part of the React Component.
The onMouseOver event in React occurs when the mouse pointer is moved onto an element (it can be a div, a button, an input, a textarea, etc). The event handler function will be fired and we can execute our logic there. The onMouseOut event in React occurs when the mouse pointer is moved out of an element.
An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.
You need to capitalize some of the letters.
<img src="/images/profile-pic.png" height="100" onClick={this.onClick} onMouseOver={this.onHover} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
