Como trabalhar com elementos de formulário em 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 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:
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 criar diferentes estados e funções de manipulador para cada elemento de entrada se tornaria repetitivo ao trabalhar com vários campos de entrada.
Para evitar escrever código repetitivo e redundante nessas situações, dê a cada campo de entrada um nome distinto, defina um objeto como o valor do estado inicial de seu formulário e 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 a 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, em seguida, 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 de manipulador, handleFirstNameChange . Essa função handleFirstNameChange atualizará as propriedades de 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:
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 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 elemento tag textarea determina seu valor por seus filhos, como visto no bloco de código abaixo:
<textarea>
Hello, How are you?
</textarea>
Com o React, para usar o elemento textarea , você pode criar um elemento input com o tipo textarea .
Igual a:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
Uma alternativa para usar textarea como um tipo de entrada é usar a tag de elemento textarea no lugar da tag de tipo de entrada, conforme visto abaixo:
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
A tag textarea possui um atributo value 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 ao trabalhar com entradas de caixa de seleção . O campo de entrada da caixa de seleção de tipo não possui um atributo de valor. No entanto, ele tem um atributo verificado . Este atributo marcado difere de um atributo de valor ao 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 input usando o atributo htmlFor . Este atributo htmlFor recebe o ID do elemento de entrada – neste caso, juntando-se. 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 true ou false.
Você deve incluir duas props no elemento de entrada da caixa de seleção : uma propriedade marcada 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>
)
}
Esse bloco de código gera um estado isChecked e define seu valor inicial como false . Ele define o valor de isChecked para o atributo verificado no elemento de entrada. A função handleChange irá disparar e mudar 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 manipulá-los de maneira semelhante a como manuseava 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 marcada às propriedades de estado se o tipo de entrada de destino for uma caixa de seleção . Caso contrário, atribui os valores do atributo value .
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.
Deixe um comentário