React basic 5 — Basic Event Handlers

Now we went over basic class structures from the last post (React basic 4 — Class Based Component and Lifecycle Methods), I would like to go over handling events. The key is the use of props to invoke a method of a parent Class from its child Class's event, which comes at the end of this post.

In the next few posts, we will be creating a simple image search app like this.

Basic event handler

For the very basic event handler, we can create a method and invoke the event from a DOM event object. As you can see from below example, a method can be called from JSX using {} syntax. This method just console-logs what a user typed.

import React from ‘react’;class SearchBar extends React.Component {

onInputChange = e => {
console.log(e.target.value);
}
render() {
return (
<div className = “ui segment”>
<form className=”ui form”>
<div className =”field”>
<input type = “text”
onChange={ this.onInputChange } />
</div>
</form>
</div>
);
}
};export default SearchBar;

Inline event handler

In fact, a simple method like the example above could be easily expressed in the inline of JSX tag using more recent ES syntax. This way, you can keep your Class code slimmer.

import React from ‘react’;class SearchBar extends React.Component {   render() {
return (
<div className = “ui segment”>
<form className=”ui form”>
<div className =”field”>
<input type = “text”
onChange={ e => console.log(e.target.Value) } />
</div>
</form>
</div>
);
}
};export default SearchBar;

Controlled vs uncontrolled components

Some DOM elements such as a form keep its own internal states. Although these states could be accessible, it is recommended to store the data into the React state using .setState. In this example, the state gets updated with onChange, and the DOM value is "overridden" by the updated state.

import React from ‘react’;class SearchBar extends React.Component {   state = { term: 'Write something here' };   render() {
return (
<div className = “ui segment”>
<form className=”ui form”>
<div className =”field”>
<input
type = “text”
value = {this.state.term}
onChange={
e => this.setState({ term: e.target.value })
}
/>
</div>
</form>
</div>
);
}
};export default SearchBar;

Invoking parent Class method using props

Although an event may be triggered by some element in a child Class, it may be logical to place the invoked method in its parent Class instead, depending on what that method does and how your components are organized. In below example, the method onFormSubmit in the App Class can be invoked from its child SearchBar component using prop.

App.js

import React from ‘react’;
import SearchBar from ‘./SearchBar’;
class App extends React.Component { onSearchSubmit(term){
console.log(term);
}
render() { return ( <div className = “ui container”>
<SearchBar onSubmit={this.onSearchSubmit} />
</div>
); }};export default App;

SearchBar.js

import React from ‘react’;class SearchBar extends React.Component {   state = { term: 'Write something here' };   onFormSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state.term);
}
render() {
return (
<div className = “ui segment”>
<form onSubmit = {this.onFormSubmit} className=”ui form”>
<div className =”field”>
<input
type = “text” value = {this.state.term}
onChange={
e => this.setState({ term: e.target.value })
}/>
</div>
</form>
</div>
);
}
};export default SearchBar;

Table of content

React basic 1 — “Hello React World”. Setting Up Your First React App

React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

React basic 3 — Reusable Functional Components

React basic 4 — Class Based Component and Lifecycle Methods

React basic 5 — Basic Event Handlers

React basic 6 — Use Axios Library to Fetch Data

React basic 7 — Render a List based on the API response

React basic 8 — Build React App and Host it on Server

Reference

Modern React with Redux by Stephen Grider | Udemy

Forms | React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store