Event handlers in FreeCodeCamp?

Hello,
I validated the HTML CSS and JavaScript certification and I never seen what it’s aked in this exercice:
Create a Controlled Input
and this line:
“Then add an onChange() event handler set to the handleChange() method.”

I think it’s about event handlers. But I think I never seen that before?
Is there some courses about Event handlers in freeCodeCamp ?

I can understand onChange(), but not input: event.target.value

Event handlers are a type of callback designed to fire in response to a event such as click, hover, mouse move, etc.

The first step is to create a event handler. In the case of this challenge, it looks like the following:

  handleChange(event) {
   this.setState({
     input: event.target.value
   })
  }

The event object is automatically passed into handleChange in the next step. This is a large object containing information about the element that the event just occurred on. If you click on a object, then the event object, under event.target.value, will tell you the value (text) for the element that was clicked.

Next, you need to attach it to a element:

<input value={this.state.input} onChange={this.handleChange}/>

In this case, the onChange is the event handler. It tells the window to constantly be looking for a change to the value of this input element. It is a function in itself that accepts a function as a argument, also known as a higher order function.

The reason handleChange is a callback is because it is fired in response to another function call. onChange detects change to input and then creates a event object for the element, passes it into the callback handleChange, and then handleChange runs.

Finally, you need to bind handleChange to the current React Component in the constructor.

this.handleChange = this.handleChange.bind(this)

If you press F12, go to the developer console and type console.log(this), you will notice it returns the window object, which is the current object the entirety of this page is running in. That is the current scope. Notice how handleChange doesn’t exist in this scope, which is why it would produce a error if you tried to reference it.

When the input element is rendered from the react and put onto the main HTML, this will point to the window object above and not your React element because the value of this changes based on what object you are working in. The window object is a object like any other and provides functions and data for how the webpage should render.

All of this stems from the idea that objects are mutable, where setting a value to a object only creates a reference.

let x = {
value: 5
}
let y = x
y.value = 6
console.log(x.value)  // 6 
console.log(y.value) // 6

When you bind the handleChange to the React component, you are setting the value of this, inside the React Component , to always reference the component object rather then the window object. In the code above, y is just a reference to the x object, it is not its own object as with x.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.