¿Qué son los componentes controlados en ReactJS?

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.

En el formulario, los elementos son los escritos como textarea. input o el seleccionado como botones de radio o casillas de verificación, cada vez que hay algún cambio, se actualiza en consecuencia a través de algunas funciones que también actualizan el estado.

Requisito previo:

• Conocimientos sobre reactJs .
• Conocimiento sobre ganchos de reacción.

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 con nombres de campos de entrada y un botón para enviar. Estamos usando useState de gancho de reacción para mantener dos de nuestros estados showName y name que almacenan un valor booleano y una string respectivamente.

Estamos creando una función onClick denominada handleSubmit que evita el comportamiento predeterminado del botón de envío y establece showName en verdadero. Y después de hacer clic en el botón, es decir, enviar nuestro formulario, estamos mostrando el nombre que hemos ingresado.

import { useState } from 'react';
  
function App() {
  const [name, setName] = useState('');
  const [showName, setShowName] = useState(false);
  
  function handleSubmit(e) {
    e.preventDefault();
    setShowName(true);
  }
    
  return (
    <div className="App">
      <form>
        <label>Name:</label>
        <input name="name" value={name} 
          onChange={(e) => setName(e.target.value)} />
        <button onClick={handleSubmit} type="submit">
          Submit
        </button>
      </form>
      {/* Checks the condition if showName is 
      true, which will be true only if 
      we click on the submit button */}
      {showName === true && 
      <p>You have submitted. Name: {name}</p>}
    </div>
  );
}
  
export default App;

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

npm start

Producción:

Referencia: https://reactjs.org/docs/forms.html#control-components