Handling Events In React

Handling events in React is done through Synthetic events. Since you will work with “HTML like” JSX, we can’t handle events the exact same way that we would in a real HTML file. Synthetic events are React’s way of working around this, and at the core, they are wrappers to the actual HTML elements.

Working With Synthetic Events

Working with Synthetic events is similar to how you interact with any component in React. If you want something to be available in a child component (think JSX elements in your component file) you pass down props.

onClickHandler() {
console.log(“Clicked!”)
}


render() {
    return (
      <button onClick={this.onClickHandler}>}
        Click Here!
      </button>
    );
  }

The onClick event is one of Reacts Synthetic events, and it accepts only one function. We passed in our onClickHandler function, and it will run when the user clicks the button in the browser. It’s that easy.

Inline functions

You can also pass in the function inline without declaring it earlier in the file. This gives us one key ability, to use the event argument.

render() {
    return (
      <button onClick={(event) => console.log(“Clicked!”, event)}>}
        Click Here!
      </button>
    );
  }

Which brings us to

The Event Argument

Whenever the event is emitted, the function automatically receives the event argument. The values change depending on the event being used, but it always receives it.

Your function can use the information in this argument to capture the data you want or change the state of the application.

onChangeHandler(event) {
this.setState({
inputText: event.target.value
    })
}

render() {
    return (
      <input value={this.state.inputText} onChange={(e) => onChangeHandler(e)} />
    );
  }

The input above will change the state to be what the user enters in the input element, and then reflects that in the input. This is one of the most common use cases for using the event argument, but there are plenty more times to use it. Oh and if you need some inspiration check out Reacts list of Synthetic events. The sky is the limit.

Callback Handlers

You may not have noticed, but we used something pretty fancy a minute ago. We used a callback handler! In React, child components cant pass data directly to a parent component, which poses a problem when you want the data to be controlled in state to enforce a single source of truth.

Callback handlers are an easy solution to this. Passing a function that deals with the data received from the event argument remedies this in simple examples like this, but can also be really useful when using completely custom components.

Multiple Event Handlers

While each Synthetic event can only accept one function as an argument, each component can use multiple different events.

Doing this you can set multiple specific interactions on a single element or component.

onChangeHandler(event) {
this.setState({
inputText: event.target.value
    })
}

onMouseOverHandler(event) {
console.log(“Moused over”, event)
}

render() {
    return (
      <input value={this.state.inputText} onChange={(e) => onChangeHandler(e)} onMouseOver={(e) => this.onMouseOverHandler(e)} />
    );
  }