Recap on React Events

React has been very fun but also challenging at the same time for the last few days. React events apparently are not the same as HTML DOM events. They are similar in the sense that they both handle events, but we have to be particular about the way we write our syntax. This is because React uses camelCase, and won’t recognize onclick, onmouseover, onkeyup, etc. that exist with the HTML DOM. The syntax between the two are slightly different.

To utilize React events we have to first specify the event we’re listening for, and also the event handler that will get called all inside of our markup. With JSX, we pass in a function as an event handler, not strings. If you still remember, in JS for the render HTML the syntax was <button onclick=“activate()”></button>, and now in JSX it would be <button onClick={this.activate}></button>. Notice the camelCase and the {} as opposed to the “”! The event handlers call the function that is responsible for modifying the states, and React automatically calls render.

A perk of using React is that its event handlers are never attached to the DOM elements directly. There is only one event handler at the root of an application that’s then responsible for listening to all other events and calling other handlers when needed. This means less memory is taken up by the application.


Events Examples

onClick events - These events work on buttons, p tags, and basically any other elements that are clickable. …onDrag, onDoubleClick, etc. Below is an example on a submit button click that has a counter on it. Each time you click on the button, the count goes up by 1.

import React from 'react'
export default class Counter extends React.Component {
constructor() {
super();
this.state = {
count: 0
}
}
handleChange = (event) => {
this.setState = ({
count: this.state.count + 1
})
}
render() {
return (
<div>
<button type="submit" value="Button" onClick={this.handleChange} />
</div>
)
}
}

Another code snippet example is from one of our React labs where we clicked on a button to get the coordinates of the click, and the target was denoted by clientX and clientY. Then, we rendered it in our <index.js> to show the button. Inside the button tag, we display the event via onClick and once the button is clicked, it fires the ‘get’ function which receives the coordinates/location of the mouse.

import React from 'react'
export default class CoordinatesButton extends React.Component {
get = (event) => {
this.props.onReceiveCoordinates([event.clientX, event.clientY])
}
render(){
return(
<div>
<button onClick={this.get}/>
</div>
)}
};

onChange events - Only applies to the changes in inputs of type, textarea, and select. When you are typing in a text box and the values are changing. The value of the state starts as an empty string and the state is manipulated as we are typing, and the value is grabbed by event.target.value. In the HTML, the value is set to the initial value which is an empty string, and while we’re typing (onChange), the handleInput function gets fired and the value becomes whatever we are typing.

import React from 'react'
export default class Form extends React.Component {
constructor() {
super()
this.state = {
value: '',
}
}
handleInput = (event) => {
this.setState({
value: event.target.value,
})
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleInput} />
</div>
)
}
}

Hover events - onMouseEnter + onMouseLeave: also mouse events, but I made it separately just because they are not clicking events, but rather hover events.

import React from 'react'
export default class Hover extends React.Component {
constructor(props) {
super(props)
this.state = {
box: 'out'
}
}
changeColor() {
this.setState({
box_state: 'in'
})
}
resetColor() {
this.setState({
box_state: 'out'
})
}
render() {
return (
<div style={insert box model} onMouseEnter={this.changeColor.bind(this)} onMouseLeave={this.resetColor.bind(this)}>
</div>
)
}
}

With the proper styling for a box that I didn’t provide in the code snippet, you could hover over the box to see the color change! I used bind here because I’m not using an arrow function.

Key events - used with onKeyPress={this.function}

  • altKey: boolean, whether the key was pressed with another key.
  • ctrlKey: boolean, (same).
  • shiftKey: boolean, (same).

This

You always have to bind the component context to the function when you have to access the state and manipulate it. If you use an arrow function inside of the class however, you don’t have to explicitly bind the context. This is bound ‘lexically’ and has the meaning from its original context. The value of this inside the event handler will always refer to the component the event handler is in.