React.js | Entradas no controladas frente a entradas controladas

En HTML, los elementos de formulario como <input>, <textarea>, <select>, etc. normalmente mantienen su propio estado y lo actualizan según la entrada del usuario. En React, un estado mutable (modificable) generalmente se mantiene en la propiedad de estado de los componentes. 
En los formularios de React, el valor de entrada puede ser de dos tipos según su elección: valores no controlados y controlados.
Entrada no controlada: con valores de entrada no controlados, no hay actualización ni cambio de ningún estado. Mantiene su propio estado interno, lo que básicamente significa que recuerda lo que escribió en el campo. Ese valor se puede explotar extrayéndolo usando la palabra clave ref siempre que sea necesario. En las entradas no controladas, el valor que envía es el valor que obtiene.
 

Ahora, abra su proyecto de reacción y edite el archivo index.js en la carpeta src:

índice src.js:

import React from 'react';
import ReactDOM from 'react-dom';
import NameForm from './NameForm';
 
ReactDOM.render(
  <React.StrictMode>
    <NameForm />
  </React.StrictMode>,
  document.getElementById('root')
);

Cree un nombre de componente NameForm.js en el proyecto de reacción:

Ahora, abra su proyecto de reacción y edite el archivo NameForm.js en la carpeta src:

src NameForm.js:
 

import React,{Component} from 'react';
 
class NameForm extends  React.Component {
    handleClick = () => {
      const name = this._name.value;
      alert('Hello ', name);
    }
   
    render() {
      return (
        <div>
          <input type="text" ref=
                {inputValue => this._name = inputValue}
             
            placeholder="Enter your name" />
            <button onClick={this.handleClick}>
                Done
            </button>
        </div>
     );
    }
  }
 
export default NameForm;

Entrada: Tanisha 
Salida: Hola Tanisha (Mostrar en el cuadro de alerta) 
 

Entrada controlada: en las entradas controladas, en todo momento hay algún tipo de cambios y enmiendas en el campo, cada carácter ingresado e incluso algo como un retroceso contaría como un cambio. El valor actual del campo de entrada será un accesorio del componente de clase (por lo general, vivirá en el estado al que se hace referencia al usar this.state.varName), ya que no mantienen su estado interno. También habrá una función de devolución de llamada (como onChange, onClick, etc.) que es necesaria para manejar los cambios (en valor) que ocurren en el campo de entrada, lo que los hace controlables. 
Ahora, abra su proyecto de reacción y edite el archivo NameForm.js en la carpeta src:
src NameForm.js:

import React,{Component} from 'react';
 
 
class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
        };
    }
    
    handleNameChange = (event) => {
        this.setState({ name: event.target.value });
    };
    
    render() {
        return (
            <div>
                <input type="text" onChange=
                        {this.handleNameChange}
                        placeholder="Enter your name" />
                <h1>{this.state.name}</h1>
            </div>
        );
    }
}
 
export default NameForm;

Entrada: Tanisha 
Salida: Tanisha (Mostrando en la pantalla letra por letra a medida que el usuario escribe) 
 

¿Cuál es mejor?  
Es evidente que los campos de formulario controlados y no controlados tienen sus beneficios individuales. Es posible que deba usar ambos o cualquiera dependiendo de lo que requiera la situación. Si está creando un formulario simple con poca o ninguna retroalimentación de la interfaz de usuario y sin necesidad de validación instantánea (lo que significa que solo validaría y/o necesitaría los valores cuando lo envíe), lo que debe hacer es usar entradas no controladas con referencias. Mantendría la fuente de la verdad en el DOM haciéndolo más rápido y requiriendo menos código. Si necesita más comentarios sobre la interfaz de usuario y tiene en cuenta cada pequeño cambio en el campo de entrada en particular, elija una entrada controlada.