Complete Guide to Working With Forms In Reactjs

In React, a component’s internal state is kept to minimum because every time the state changes, the component is rendered again. The purpose of this is to have an accurate representation of the component state in your JavaScript code and let React keep the interface in sync.

For this reason, form components such as <input>, <textarea>, and <option> differ from their HTML counterparts because they can be mutated via user interactions.

React provides two ways of handling forms as components and lets you choose based on your app characteristics or personal preference. The two available ways to handle a form field are as a controlled component or an uncontrolled component.

Controlled Components

A form component with a value or checked prop is called a controlled component. In a controlled component, the value rendered inside the element will always reflect the value of the prop. By default the user won’t be able to change it.

That’s the case for your Kanban cards checklist. If you try clicking one of the task’s checkboxes, it won’t change. They are reflecting the value hardcoded in your cardsList array and will only change if you change the array itself.

Before heading back to the Kanban project, though, let’s see another example. Start with a Search component that contains an input field:

importReact, { Component }from’react’;import{render}from ’react-dom’;classSearchextendsComponent {
  render() {return(
      <div>
        Search Term: <inputtype="search" value="React" />
      </div>
    )
  }
}

render(<Search/>, document.body);

This will render a form field displaying an immutable value of “React.” Any user input will have no effect on the rendered element because React has declared the value to be ”React,” as shown

9781484212615_Fig02-08.jpg

To be able to make this value change, you need to handle it as a component state. This way, any changes to the state value will be reflected in the interface.

classSearchextendsComponent {constructor() {super();this.state = {searchTerm: "React"};}render() {return(
      <div>
        Search Term:
        <inputtype="search"value={this.state.searchTerm}/>
      </div>
    )
  }
}

You could even give the end user the ability to update the state value using the onChange event.

classSearchextendsComponent {
  constructor() {super();this.state = {
      searchTerm: "React"
    };
  }handleChange(event) {this.setState({searchTerm: event.target.value});}render() {return(
      <div>
        Search Term:
        <inputtype="search" value={this.state.searchTerm}onChange={this.handleChange.bind(this)}/>
      </div>
    )
  }
}

This may look like a convoluted way to deal with forms, but it has the following advantages:

  • It stays true to the React way of handling components. The state is kept out of the interface, and is entirely managed in your JavaScript code.
  • This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example, you could very easily limit the user input to 50 characters:
    this.setState({searchTerm: event.target.value.substr(0, 50)});

Special Cases

There are a few special cases to remember when creating controlled form components: TextArea and Select.



Pin It on Pinterest

Shares

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)