Handling Events

Question 1

What are some syntax differences in react for event handlers?

Answer 1

React events are named using camelCase, rather than lowercase.
With JSX you pass a function as the event handler, rather than a string.

Question 2

What is the SyntheticEvent in react?

Answer 2

the SyntheticEvent wrapper that forms part of React’s Event System.
Events are synthetic events. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility.

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Question 3

How do you access the underlying browser event?

Answer 3

If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. The synthetic events are different from, and do not map directly to, the browser’s native events.

For example in onMouseLeave event.nativeEvent will point to a mouseout event.

Question 4

Synthetic object attributes

Answer 4

Every SyntheticEvent object has the following attributes:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

Question 5

addEventListener in react

Answer 5

When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.

Question 6

Using ‘this’ in JSX callbacks

Answer 6

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

Question 7

Other ways to use besides bind

Answer 7

If calling bind annoys you, there are two ways you can get around this. If you are using the experimental public class fields syntax, you can use class fields to correctly bind callbacks:

handleClick = () => {
console.log(‘this is:’, this);
}

If you aren’t using class fields syntax, you can use an arrow function in the callback:

   this.handleClick()}>
    Click me

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering.

Question 8

Best way to solve the ‘this’ issue

Answer 8

React devs generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem

Question 9

Passing arguments to event handlers

Answer 9

Inside a loop, it is common to want to pass an extra parameter to an event handler. For example, if id is the row ID, either of the following would work:

this.deleteRow(id, e)}>Delete Row
Delete Row

The above two lines are equivalent, and use arrow functions and Function.prototype.bind respectively.

In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.