Como trabalhar com elementos de formulário no React
Os formulários são um ótimo caso de uso para gerenciamento de estado com ganchos React.
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 no React do que outros elementos DOM.
Aprenda como 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 é realizado criando um estado e vinculando-o ao campo de entrada.
Por exemplo:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName( event.target.value )
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
Acima temos um estado firstName, um evento onInput e um manipulador handleChange. A função handleChange é executada a cada pressionamento de tecla para atualizar o estado firstName.
Essa abordagem pode ser ideal ao trabalhar com um campo de entrada, mas a criação de diferentes estados e funções de manipulador para cada elemento de entrada se tornaria repetitiva ao trabalhar com vários campos de entrada.
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 dos campos de entrada.
Por exemplo:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</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 ouvinte de evento onInput ao elemento de entrada e chame a função de manipulador criada.
Por exemplo:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
O bloco de código acima usou um evento onInput e uma função manipuladora, handleFirstNameChange. Esta função handleFirstNameChange atualizará as propriedades do estado quando chamada. Os valores das propriedades de estado serão iguais aos 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. Este comportamento é inconveniente em algumas situações, como quando se 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 os arquivos index.html, os elementos do formulário rastreiam seu estado e o modificam em resposta à entrada do usuário. Com 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 da verdade. Dessa forma, o componente que cria um formulário controla o que acontece quando um usuário insere dados. Os elementos do 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 proposta de valor ao seu elemento de entrada:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
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 elemento textarea é como qualquer elemento de entrada normal, mas contém entradas multilinhas. É útil ao passar informações que requerem mais de uma linha.
Em um arquivo index.html, o elemento tag textarea determina seu valor por seus filhos, conforme visto no bloco de código abaixo:
<textarea>
Hello, How are you?
</textarea>
Com React, para usar o elemento textarea, você pode criar um elemento de entrada com o tipo textarea.
Igual a:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Uma alternativa ao uso de textarea como tipo de entrada é usar a tag do elemento textarea no lugar da tag do tipo de entrada, conforme mostrado abaixo:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
A tag textarea possui um atributo de valor que contém as informações do usuário inseridas no elemento textarea. 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 entradas de caixa de seleção. O campo de entrada do tipo checkbox não possui um atributo de valor. No entanto, possui um atributo checked. Este atributo checked difere de um atributo de valor por exigir um valor booleano para determinar se a caixa está marcada ou desmarcada.
Por exemplo:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
O elemento label refere-se ao ID do elemento de entrada usando o atributo htmlFor. Este atributo htmlFor recebe o ID do elemento de entrada, neste caso, joining. Ao criar um formulário HTML, o atributo htmlFor representa o Atributo for.
A caixa de seleção é melhor usada como uma entrada controlada. Você pode conseguir isso criando um estado e atribuindo a ele o valor booleano inicial de verdadeiro ou falso.
Você deve incluir dois adereços no elemento de entrada checkbox: uma propriedade checked e um evento onChange com uma função manipuladora que determinará o valor do estado usando a função setIsChecked().
Por exemplo:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked( (prevState) => !prevState )
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Este bloco de código gera um estado isChecked e define seu valor inicial como false. Ele define o valor de isChecked para o atributo checked no elemento de entrada. A função handleChange será acionada e alterará o valor do estado de isChecked para o 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 tratá-los de maneira semelhante à maneira como lidou com vários elementos de entrada do mesmo tipo.
Aqui está um exemplo:
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData( (prevState) => {
return {
...prevState,
[name]: type === checkbox ? checked : value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
Observe que na função handleChange, setFormData usa um operador ternário para atribuir o valor da propriedade checked às propriedades de estado se o tipo de entrada de destino é uma caixa de seleção. Caso contrário, atribui os valores do atributo valor.
Agora você pode lidar com formulários React
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 elementos do formulário adicionando uma propriedade de valor ou uma 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.