No React, um componente controlado refere-se a um componente que atualiza o valor atual por meio de uma função de retorno de chamada. O componente React que renderiza o formulário também controla as operações que ocorrem no formulário durante a entrada do usuário. ser escrito no estado do componente, esse tipo de componente é chamado de componente controlado no React.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
O componente React que renderiza o formulário também controla o que acontece com o formulário durante a entrada do usuário. Os elementos de entrada do formulário cujos valores são controlados pelo React dessa forma são chamados de "componentes controlados".
Alguns internautas explicaram isso: No React, sempre que o estado do formulário muda, ele será gravado no estado do componente. Esse tipo de componente é chamado de componente controlado no React.
Processo de atualização para componentes controlados:
1. Você pode definir o valor padrão do formulário no estado inicial
2. Sempre que o valor do formulário for alterado, chame o manipulador de eventos onChange.
3. O processador de eventos obtém o estado alterado através do objeto de evento e e altera o estado;
4. setState aciona a atualização da visualização e conclui a atualização dos valores dos componentes do formulário.
Os componentes controlados atualizam o valor atual por meio de funções de retorno de chamada, como OnChange. O componente pai controla e gerencia seu estado por meio de funções de retorno de chamada e passa novos valores para ele como propriedades. Os componentes controlados também são chamados de "componentes burros".
const { useState } de 'react'; function Controlled () { const [email, setEmail] = useState(); valor={email} onChange={handleInput} />;}Amplie seu conhecimento:
O que são componentes não controlados?
Componentes não controlados são componentes que armazenam seu próprio estado internamente e podem usar ref para consultar o DOM para encontrar seu valor atual quando necessário. Mais ou menos como o HTML tradicional. A maioria dos componentes nativos do formulário React suportam controlado e não controlado:
const { useRef } from 'react';function Exemplo () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}4 Quais são as diferenças entre eles?
Em componentes controlados, os dados do formulário são manipulados por componentes React. Em componentes não controlados, os dados do formulário são manipulados pelo próprio DOM.
Para componentes controlados, o estado do componente deve ser usado. Para componentes não controlados, o uso de estado é totalmente opcional, mas Refs deve ser usado dentro deles.
Para componentes controlados podemos validar na entrada, mas não para componentes não controlados.