A Simple ReactJS Form Example - Website and Mobile App Solutions in Nagpur

In this tutorial, we will learn how to use forms in React.

In HTML, Form elements such as input, textarea, and select typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

input tag

In React, A input set the value using {this.state.value} and change handle by onChange event.

checkbox tag

In React, checkbox input is checked or unchecked handle by attribute checked. On check or uncheck the event called and set the value true if checked and false if unchecked.

<label>
<input type=”checkbox” checked={this.state.isConfirm} onChange={this.handleInputChange} />Please check to confirm:
</label>

textarea tag

In React, A textarea uses a value attribute, so textarea element in React is slightly different from ordinary HTML.

<label>
Comment :
<textarea name=\”comment\” value={this.state.value} onChange={this.handleChange} />
</label>

select tag

In HTML, select input creates a drop-down list and make selected to show the value as selected for drop-down values. In React, instead of using selected attribute, it uses a value attribute on the root select tag.

<label>
   Pick your favorite flavor:
   <select name=\”flavor\” value={this.state.value} onChange={this.handleChange}>
         <option value=\”\”>–Pick your favorite flavor–</option>
         <option value=\”grapefruit\”>Grapefruit</option>
         <option value=\”lime\”>Lime</option>
         <option value=\”coconut\”>Coconut</option>
         <option value=\”mango\”>Mango</option>
   </select>
</label>

file input tag

In React, An <input type=\”file\” /> is always an uncontrolled component because its value can only be set by a user, and not programmatically. You should use the File API to interact with the files.

<label>
Document Upload
<input type=”file” name=”fileUpload” onChange={this.fileHandler} />
</label>

ReactJS Form Example

In the following example, we will set an input value using state value = {this.state.data}. onChange allows to update the state whenever the input value changes. And When you submit the form we apply the onSubmit event and restrict page to reload using event.preventDefault();

import React, {Component} from \’react\’;
import \’./App.css\’
class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         isConfirm: false,
         fileUpload : \’\’
      };
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
   }

   fileHandler = event => {
      this.setState({
      fileUpload : event.target.files[0]
      });
   }

   handleInputChange(event) {
      const target = event.target;
      const value = target.type === \’checkbox\’ ? target.checked : target.value;
      this.setState({
         isConfirm: value
      });
   }

   handleChange(event) {
      this.setState({[event.target.name]: event.target.value});
   }

   handleSubmit(event) {
      event.preventDefault();
      let htm = \'<h2>O/p</h2>A name was submitted : <strong>\’ + this.state.name +\'</strong> <br/ >\’+
\’A comment was submitted : <strong>\’ + this.state.comment +\'</strong> <br/ >\’+
\’A Confirm selected : <strong>\’ + this.state.isConfirm +\'</strong> <br/ >\’+
\’Your favorite flavor : <strong>\’ + this.state.flavor +\'</strong> <br/ >\’+
\’Your file Upload : <strong>\’ + this.state.fileUpload.name+\'</strong>\’;

document.getElementById(\’dataSubmit\’).innerHTML = htm;
}

   render(){
      return (
      <div className=\”App\”>
      <form enctype=\”multipart/form-data\” method=\”post\” onSubmit={this.handleSubmit}>

      <div>
         <label>
            Comment :
         <textarea name=\”comment\” value={this.state.value} onChange={this.handleChange} />
         </label>
      </div>

      <div>
         <label>
            <input type=\”checkbox\” checked={this.state.isConfirm} onChange={this.handleInputChange} />
      Please check to confirm:
         </label>
      </div>

      <div>
         <label>
            Pick your favorite flavor:
            <select name=\”flavor\” value={this.state.value} onChange={this.handleChange}>
               <option value=\”\”>–Pick your favorite flavor–</option>
               <option value=\”grapefruit\”>Grapefruit</option>
               <option value=\”lime\”>Lime</option>
               <option value=\”coconut\”>Coconut</option>
               <option value=\”mango\”>Mango</option>
            </select>
         </label>
      </div>

      <div>
         <label>
            Document Upload
            <input type=\”file\” name=\”fileUpload\” onChange={this.fileHandler} />
         </label>
      </div>

</form>
<div id=\”dataSubmit\”></div>

      </div>
      );
      }
}
export default App;

Output

$\"\"$