En React, un componente controlado se refiere a un componente que actualiza el valor actual a través de una función de devolución de llamada; el componente React que representa el formulario también controla las operaciones que ocurren en el formulario durante la entrada del usuario. escribirse en el estado del componente; este tipo de componente se denomina componente controlado en React.
El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.
El componente React que representa el formulario también controla lo que sucede con el formulario durante la entrada del usuario. Los elementos de entrada del formulario cuyos valores están controlados por React de esta manera se denominan "componentes controlados".
Algunos internautas explicaron esto: en React, cada vez que cambia el estado del formulario, se escribirá en el estado del componente. Este tipo de componente se denomina componente controlado en React.
Proceso de actualización de componentes controlados:
1. Puede establecer el valor predeterminado del formulario en el estado inicial.
2. Siempre que cambie el valor del formulario, llame al controlador de eventos onChange.
3. El procesador de eventos obtiene el estado cambiado a través del objeto de evento e y cambia el estado;
4. setState activa la actualización de la vista y completa la actualización de los valores de los componentes del formulario.
Los componentes controlados actualizan el valor actual mediante funciones de devolución de llamada, como OnChange. El componente principal controla y administra su estado a través de funciones de devolución de llamada y le pasa nuevos valores como propiedades. Los componentes controlados también se denominan "componentes tontos".
const { useState } de 'react'; función Controlada () { const [correo electrónico, setEmail] = useState(); const handleInput = (e) => setEmail(e.target.value); valor={correo electrónico} onChange={handleInput} />;}Amplíe sus conocimientos:
¿Qué son los componentes no controlados?
Los componentes no controlados son componentes que almacenan su propio estado internamente y pueden usar ref para consultar el DOM y encontrar su valor actual cuando sea necesario. Algo así como HTML tradicional. La mayoría de los componentes nativos del formulario React admiten lo controlado y lo no controlado:
const { useRef } de 'react';ejemplo de función () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}4 ¿Cuáles son las diferencias entre ellos?
En los componentes controlados, los datos del formulario son manejados por componentes de React. En componentes no controlados, los datos del formulario son manejados por el propio DOM.
Para componentes controlados, se debe utilizar el estado del componente. Para componentes no controlados, el uso de state es completamente opcional, pero se deben usar Refs dentro de ellos.
Para componentes controlados podemos validar en la entrada, pero no para componentes no controlados.