Trabalhar com formulários e elementos de formulário ao desenvolver com React pode ser complexo porque os elementos de formulário HTML se comportam de maneira um pouco diferente em React do que outros elementos DOM.
Aprenda a trabalhar com formulários e elementos de formulário, como caixas de seleção, áreas de texto e entradas de texto de linha única.
Gerenciando campos de entrada em formulários
No React, o gerenciamento de um campo de entrada em um formulário geralmente é feito criando um estado e vinculando-o ao campo de entrada.
Por exemplo:
funçãoAplicativo() {const [firstName, setFirstName] = React.useState('');
funçãohandleFirstNameChange(evento) {
setFirstName( evento.alvo.valor )
}
retornar (
<forma>
<tipo de entrada='texto' espaço reservado ='Primeiro nome' onInput={handleFirstNameChange} />
</form>
)
}
Acima temos um primeiro nome
estado, um onInput evento e um lidar com mudança manipulador. O lidar com mudança função é executada em cada pressionamento de tecla para atualizar o primeiro nome estado.Essa abordagem pode ser ideal ao trabalhar com um campo de entrada, mas criar diferentes estados e as funções do manipulador para cada elemento de entrada se tornariam repetitivas ao trabalhar com várias entradas Campos.
Para evitar escrever código repetitivo e redundante em tais situações, dê a cada campo de entrada um nome distinto, defina um objeto como o valor de estado inicial do seu formulário e, em seguida, preencha o objeto com propriedades com os mesmos nomes da entrada Campos.
Por exemplo:
funçãoAplicativo() {const [formData, setFormData] = React.useState(
{
primeiro nome: '',
sobrenome: ''
}
);
retornar (
<forma>
<tipo de entrada='texto' espaço reservado ='Primeiro nome' nome='primeiro nome' />
<tipo de entrada='texto' espaço reservado ='Sobrenome' nome='sobrenome' />
</form>
)
}
O formData servirá como variável de estado para gerenciar e atualizar todos os campos de entrada dentro do formulário. Certifique-se de que os nomes das propriedades no objeto de estado sejam idênticos aos nomes dos elementos de entrada.
Para atualizar o estado com os dados de entrada, adicione um onInput ouvinte de evento para o elemento de entrada e, em seguida, chame sua função de manipulador criada.
Por exemplo:
funçãoAplicativo() {const [formData, setFormData] = React.useState(
{
primeiro nome: '',
sobrenome: ''
}
);
funçãolidar com mudança(evento) {
setFormData( (prevState) => {
retornar {
...prevState,
[evento.alvo.nome]: evento.alvo.valor
}
})
}
retornar (
<forma>
<entrada
tipo='texto'
espaço reservado ='Primeiro nome'
nome='primeiro nome'
onInput={handleChange}
/>
<entrada
tipo='texto'
espaço reservado ='Sobrenome'
nome='sobrenome'
onInput={handleChange}
/>
</form>
)
}
O bloco de código acima usou um onInput evento e uma função de manipulador, handleFirstNameChange. Esse handleFirstNameChange A função atualizará as propriedades do estado quando chamada. Os valores das propriedades de estado serão os mesmos de seus elementos de entrada correspondentes.
Convertendo suas entradas em componentes controlados
Quando um formulário HTML é enviado, seu comportamento padrão é navegar para uma nova página no navegador. Esse comportamento é inconveniente em algumas situações, como quando você deseja validar os dados inseridos em um formulário. Na maioria dos casos, você achará mais adequado ter uma função JavaScript com acesso às informações inseridas no formulário. Isso pode ser facilmente alcançado no React usando componentes controlados.
Com arquivos index.html, os elementos de formulário mantêm o controle de seu estado e o modificam em resposta à entrada de um usuário. Com o React, a função set state modifica um estado dinâmico armazenado na propriedade state do componente. Você pode combinar os dois estados tornando o estado React a única fonte de verdade. Dessa forma, o componente que cria um formulário controla o que acontece quando um usuário insere dados. Elementos de formulário de entrada com valores que o React controla são chamados de componentes controlados ou entradas controladas.
Para fazer uso de entradas controladas em seu aplicativo React, adicione uma propriedade de valor ao seu elemento de entrada:
funçãoAplicativo() {const [formData, setFormData] = React.useState(
{
primeiro nome: '',
sobrenome: ''
}
);
funçãolidar com mudança(evento) {
setFormData( (prevState) => {
retornar {
...prevState,
[evento.alvo.nome]: evento.alvo.valor
}
})
}
retornar (
<forma>
<entrada
tipo='texto'
espaço reservado ='Primeiro nome'
nome='primeiro nome'
onInput={handleChange}
value={formData.firstName}
/>
<entrada
tipo='texto'
espaço reservado ='Sobrenome'
nome='sobrenome'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
Os atributos de valor dos elementos de entrada agora são definidos como o valor das propriedades de estado correspondentes. O valor da entrada é sempre determinado pelo estado ao usar um componente controlado.
Manipulando o elemento de entrada Textarea
O área de texto elemento é como qualquer elemento de entrada regular, mas contém entradas de várias linhas. É útil ao passar informações que requerem mais de uma única linha.
Em um arquivo index.html, o tag textarea elemento determina seu valor por seus filhos, como visto no bloco de código abaixo:
<área de texto>
Olá, como vai?
</textarea>
Com o React, para usar o área de texto elemento, você pode criar um elemento de entrada com o tipo área de texto.
Igual a:
funçãoAplicativo() {retornar (
<forma>
<tipo de entrada='área de texto' nome='mensagem'/>
</form>
)
}
Uma alternativa ao uso área de texto como um tipo de entrada é usar o área de texto tag de elemento no lugar da tag de tipo de entrada, conforme abaixo:
funçãoAplicativo() {retornar (
<forma>
<área de texto
nome='mensagem'
valor='Olá, como vai?'
/>
</form>
)
}
O área de texto tag tem um atributo de valor que contém as informações do usuário inseridas no área de texto elemento. Isso faz com que funcione como um elemento de entrada padrão do React.
Trabalhando com o elemento de entrada Checkbox do React
As coisas são um pouco diferentes quando se trabalha com caixa de seleção entradas. O campo de entrada do tipo caixa de seleção não tem um atributo de valor. No entanto, tem um verificado atributo. Esse verificado O atributo difere de um atributo de valor ao exigir um valor booleano para determinar se a caixa está marcada ou desmarcada.
Por exemplo:
funçãoAplicativo() {retornar (
<forma>
<tipo de entrada='caixa de seleção' id='juntando-se' nome='juntar' />
<rótulo htmlFor='juntando-se'>Você gostaria de se juntar à nossa equipe?</label>
</form>
)
}
O elemento label refere-se ao ID do elemento de entrada usando o htmlFor atributo. Esse htmlFor atributo recebe o ID do elemento de entrada - neste caso, juntando. Quando criando um formulário HTML, o htmlFor atributo representa o para atributo.
O caixa de seleção é melhor usado como uma entrada controlada. Você pode conseguir isso criando um estado e atribuindo a ele o valor booleano inicial de true ou false.
Você deve incluir dois adereços no caixa de seleção elemento de entrada: um verificado propriedade e um em mudança evento com uma função de manipulador que determinará o valor do estado usando o setIsChecked() função.
Por exemplo:
funçãoAplicativo() {const [isChecked, setIsChecked] = React.useState(falso);
funçãolidar com mudança() {
setIsChecked( (prevState) => !prevEstado)
}
retornar (
<forma>
<entrada
tipo='caixa de seleção'
id='juntando-se'
nome='juntar'
verificado={está verificado}
onChange={handleChange}
/>
<rótulo htmlFor='juntando-se'>Você gostaria de se juntar à nossa equipe?</label>
</form>
)
}
Este bloco de código gera um está checado estado, e define seu valor inicial para falso. Ele define o valor de está checado para o verificado atributo no elemento de entrada. O lidar com mudança função irá disparar e mudar o valor do estado de está checado ao seu oposto sempre que você clicar na caixa de seleção.
Um elemento de formulário provavelmente pode conter vários elementos de entrada de tipos diferentes, como caixas de seleção, texto etc.
Nesses casos, você pode manipulá-los de maneira semelhante a como manuseava vários elementos de entrada do mesmo tipo.
Aqui está um exemplo:
funçãoAplicativo() {deixar[formData, setFormData] = React.useState(
{
primeiro nome: ''
juntar: verdadeiro,
}
);
funçãolidar com mudança(evento) {
const {nome, valor, tipo, verificado} = event.target;
setFormData( (prevState) => {
retornar {
...prevState,
[nome]: tipo caixa de seleção? verificado: valor
}
})
}
retornar (
<forma>
<entrada
tipo='texto'
espaço reservado ='Primeiro nome'
nome='primeiro nome'
onInput={handleChange}
value={formData.firstName}
/>
<entrada
tipo='caixa de seleção'
id='juntando-se'
nome='juntar'
verificado={formData.join}
onChange={handleChange}
/>
<rótulo htmlFor='juntando-se'>Você gostaria de se juntar à nossa equipe?</label>
</form>
)
}
Observe que no lidar com mudança função, setFormData usa um operador ternário para atribuir o valor do verificado propriedade para as propriedades de estado se o tipo de entrada de destino for um caixa de seleção. Se não, ele atribui os valores do valor atributo.
Agora você pode lidar com formulários de reação
Você aprendeu como trabalhar com formulários no React usando diferentes elementos de entrada de formulário aqui. Você também aprendeu como aplicar entradas controladas aos seus elementos de formulário adicionando uma propriedade de valor ou propriedade marcada ao trabalhar com caixas de seleção.
O manuseio eficiente dos elementos de entrada do formulário React melhorará o desempenho do seu aplicativo React, resultando em uma melhor experiência geral do usuário.
