Componentes controlados vs no controlados en ReactJS

Componentes no controlados: los componentes no controlados son los componentes que no están controlados por el estado React y son manejados por el DOM (Document Object Model). Entonces, para acceder a cualquier valor que se haya ingresado, tomamos la ayuda de las refs.

Por ejemplo, si queremos agregar un archivo como entrada, esto no se puede controlar ya que depende del navegador, por lo que este es un ejemplo de una entrada no controlada.

Requisito previo:

• Introducción e instalación ReactJs
• Gancho de referencia de uso de ReactJS
• Gancho useState de ReactJS

Creando la aplicación React:

Paso 1: Cree la aplicación de reacción usando el siguiente comando:

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando:

cd project

Estructura del proyecto: Se verá así.

Ejemplo: estamos creando un formulario simple que consta de un campo de entrada con un nombre de etiqueta y un botón de envío. Estamos creando una función onSubmit que se activa cuando enviamos el formulario que muestra el nombre que hemos completado en el cuadro de alerta. Estamos accediendo al nombre que hemos llenado usando useRef .

import React, { useRef } from 'react';
  
function App() {
  const inputRef = useRef(null);
  
  function handleSubmit() {
    alert(`Name: ${inputRef.current.value}`);
  }
  
  return (
    <div className="App">
      <h3>Uncontrolled Component</h3>
      <form onSubmit={handleSubmit}>
        <label>Name :</label>
        <input type="text" name="name" ref={inputRef} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Componentes controlados: en React, los componentes controlados son aquellos en los que los datos del formulario son manejados por el estado del componente. Toma su valor actual a través de accesorios y realiza cambios a través de devoluciones de llamada como onClick, onChange, etc. Un componente principal administra su propio estado y pasa los nuevos valores como accesorios al componente controlado.

Ejemplo: estamos creando un formulario simple que consta de un campo de entrada con un nombre de etiqueta y un botón de envío. Estamos creando una función onSubmit que se activa cuando enviamos el formulario que muestra el nombre que hemos completado en el cuadro de alerta.

Estamos creando un nombre de estado que almacena el valor que ingresamos en el campo de entrada usando el enlace useState . Estamos creando una función onChange en el campo de entrada que almacena los datos que estamos ingresando en el campo de entrada de nuestro estado. Hay otra función handleSumit que se activa cuando enviamos el formulario y muestra el nombre que hemos ingresado en el cuadro de alerta.

import { useState } from 'react';
  
function App() {
  const [name, setName] = useState('');
  
  function handleSubmit() {
    alert(`Name: ${name}`);
  }
    
  return (
    <div className="App">
      <h3>Controlled Component</h3>
      <form onSubmit={handleSubmit}>
        <label>Name:</label>
        <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Diferencia entre componentes controlados y no controlados:

Referencia:

• https://reactjs.org/docs/forms.html#componentes-controlados
• https://reactjs.org/docs/componentes-descontrolados.html