React forms in class components explained with examples

Following these series of articles in React we will explain React forms  in this article. We will see how to manage React forms in class components.

React forms markup

Typically the React forms markup looks like HTML code. But we know it will be rendered as a JSX code inside the component. Have a look at this example:

<form>
  <label>
    Title:
    <input type="text" name="title" />
  </label>
  <input type="submit" value="Submit" />
</form>

Basically it is a simple HTML form. We need to add the event handlers and value attribute to it to be able to maintain and manipulate it:

 <form onSubmit={this.handleSubmit}>
        <label>
          Title:
          <input type="text" value={this.state.title} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>

Firstly  we will put this code into the render method of the Form component. So “this” refers to the class object.

Secondly on the form tag we add an onSubmit event which will be handled by an event handler called handleSubmit. We also add the onChange event for the title input to handle its changes. Moreover we give the input its value which comes from the state object.

The React forms State example

Alright. We better take a look at the state of our component in this case:

state = {
    title: ""
}

Considerably I am using the React 16 ES6 version of state. You can also use a constructor for this which is less recommended as it makes it difficult to read and we need to take care of “this” in that case.

React forms

On top of that we will have our event handlers like below. We just alert user of the new value of input tag:

 handleChange(event) {
    this.setState({title: event.target.title});
  }

  handleSubmit(event) {
    alert('A title was submitted here: ' + this.state.title);
    event.preventDefault();
  }

Great. Lets now put it all together and make our component right:

class Form extends React.Component {
    state = {
        title: "",
    }

handleChange = (event) => {
    this.setState({ title : event.target.title });
}

handleSubmit = (event) => {
    alert( 'New title ' + this.state.posts.title + 'was submitted');
    event.preventDefault();
}
    render() {
        return (
        <React.Fragment>
            <form onSubmit={this.handleSubmit}>
                <lablel>
                    Title:<br/>                        <input type="text" name="title" <br/>                         value={this.state.title} <br/>                         onChange={this.handleChange}/>
                </lablel>
                <input type="submit" value="submit" />
            </form>
        </React.Fragment> ); } 
}

In addition we use React.Fragment to wrap our code instead of a div element to make sure a new tag element will not be our container.

That is a complete component with a form. Of course we will have React forms with lots of inputs which you can check the rules in React docs. We will check out complex forms later on.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.