Uncontrolled components in React Js

In most of the cases, we recommend using controlled components to implement forms. In a controlled components, form data is handled by a React components. The alternative is uncontrolled components, where form data is handled by the Document Object Model (DOM) itself.

To write an uncontrolled components, instead of writing an event handler for every state updates, you can use a ref to get form values from the Document Object Model (DOM).

For example, this code accepts a single name in an uncontrolled components:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Since an uncontrolled components keeps the source of truth in the Document Object Model (DOM), it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be somewhat less code if you want to be quick and dirty. Otherwise, you should normally use controlled components.

If it is still not clear which type of components you should use for a particular situations, you might find this article on controlled versus uncontrolled inputs to be helpful.

Default Values

In the React rendering lifecycle, the value attribute on form elements will revoke the value in the Document Object Model (DOM). With an uncontrolled components, we are often want React to define the initial value, but leave subsequent updates uncontrolled. To handle this case, we can define a defaultValue attribute instead of value. Changing the value of defaultValue attribute after a components has mounted will not cause any update of the value in the Document Object Model(DOM).

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Likewise, <input type=”checkbox”> and <input type=”radio”> support defaultChecked, and <select> and <textarea> supports defaultValue.

The file input Tag

In HTML, an <input type=”file”> lets the user choose one and / or more files from their device storage to be uploaded to a server or manipulated by JS(JavaScript) via the File API.

<input type="file" />

In React, an <input type=”file” /> is always an uncontrolled components for reason that its value can only be set by a user, and not programmatically.

You should use the File API to interact with the files. The following example shows how to create a ref to the Document Object Model (DOM) node to access file(s) in a submit handler:

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.current.files[0].name}`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<FileInput />);