Handling forms in React.js

Unlike other libraries like angular , forms in react need to handle by ourselves. There are two types of forms input in react
Controlled inputs
Uncontrolled inputs
Controlled components or elements are those which are handled by react functions. Example is updating the field on onChange function call. Most of the components are handled in controlled way.
import React, { Component } from 'react';
class ControlledFormExample extends Component {
   constructor () {
      this.state = {
         email: ''
      }
   }
   changeEmailHandler = event => {
      this.setState({
         email: event.target.value
      });
   }
   render () {
      return (
         <form>
            <input type="email"
               name="email"
               value={this.state.email}
               onChange={this.changeEmailHandler}
            />
         </form>
      );
   }
}
Here we are updating state whenever email input field changes.
If we have multiple fields in form, we can handle onChange for all in a single function like below −
handleChange(evt) {
   this.setState({ [evt.target.name]: evt.target.value });
}
In the above common state update, we should have name of field and state variable have same name.
Uncontrolled components are generally handled by DOM. We use ref to keep a reference to the element and handle it on submit action.
submitDataHandler = event => {
   event.preventDefault();
   console.log(this.refs.nameRef.value); //will give us the name value
}
render() {
   return (
      <div>
         <form onSubmit={this.submitDataHandler}>
            <div>
               <input type="text" name="name" ref="nameRef" />
            </div>
         </form>
      </div>
   );
}
We have to extract the field values in uncontrolled component to manipulate or handle submission.
We can add custom validations and display feedback to user.
import React, { Component} from 'react';
class FormExample extends Component {
   constructor(props) {
      super(props);
      this.state = {
         username: '',
         id: null,
         errormessage: ''
      };
   }
   myChangeHandler = (event) => {
      let nam = event.target.name;
      let val = event.target.value;
      let err = '';
      if (nam === "id") {
         if (val !="" && !Number(val)) {
            err = <strong>Your id must be a number</strong>;
         }
      }
      this.setState({errormessage: err});
      this.setState({[nam]: val});
   }
   render() {
      return (
         <form>
            <h1>Hello {this.state.username} {this.state.id}</h1>
            <p>Enter your name:</p>
            <input
               type='text'
               name='username'
               onChange={this.myChangeHandler}
            />
            <p>Enter your id:</p>
            <input
               type='text'
               name='id'
               onChange={this.myChangeHandler}
            />
            {this.state.errormessage}
         </form>
      );
   }
}
ReactDOM.render(<FormExample />, document.getElementById('root'));
The value of textarea is fetched with value attribute on it.
<textarea value={this.state.myText} />
class FormExample extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         myText: 'The content of textarea'
      };
   }
   render() {
      return (
         <form>
            <textarea value={this.state.myText} />
         </form>
      );
   }
}
ReactDOM.render(<FormExample />, document.getElementById('root'));