Neste artigo você vai aprender a como fazer evento de onChange com React JS, um evento muito importante para inputs
Fala programador(a), beleza? Bora aprender mais sobre eventos em React!
Introdução
O React é uma biblioteca JavaScript popular e poderosa para criar interfaces de usuário.
Um aspecto fundamental do desenvolvimento de aplicativos web é lidar com eventos do usuário, como alterações em campos de entrada.
Neste artigo, exploraremos como fazer evento de onChange no React para ajudá-lo a criar uma experiência de usuário dinâmica e interativa.
Entendendo eventos em React
Os eventos em React são uma maneira de lidar com ações do usuário, como cliques, mudanças de valor e movimentos do mouse.
Eles são semelhantes aos eventos do DOM, mas o React encapsula os eventos em objetos chamados SyntheticEvents para garantir a compatibilidade entre navegadores.
Um exemplo comum de evento é o evento “onChange”, que é acionado quando o valor de um elemento de entrada muda.
Para entender como fazer evento de onChange no React, primeiro precisamos aprender a criar um manipulador de eventos e anexá-lo a um elemento de entrada.
Criando um manipulador de eventos onChange
Vamos criar um componente funcional simples com um campo de entrada e um manipulador de eventos onChange.
O manipulador de eventos é uma função que é chamada quando o evento onChange é acionado.
Exemplo:
import React, { useState } from 'react';
function App() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<p>Valor digitado: {inputValue}</p>
</div>
);
}
export default App;
Neste exemplo, primeiro importamos o React e o hook useState. Em seguida, criamos um componente funcional chamado App.
Dentro do componente, definimos o estado do valor da entrada usando o hook useState.
A função handleChange é nosso manipulador de eventos onChange, que atualiza o estado do valor da entrada quando o evento é acionado.
Anexando o manipulador de eventos ao elemento de entrada
Para anexar o manipulador de eventos ao elemento de entrada, usamos a propriedade onChange.
No exemplo acima, adicionamos onChange={handleChange} ao elemento de entrada.
Isso garante que, quando o valor do elemento de entrada for alterado, a função handleChange seja chamada e o estado do componente seja atualizado.
Como fazer evento de onChange em select no React JS
Assim como os campos de entrada, os elementos de seleção (ou “select”) também podem usar o evento onChange no React.
Essa abordagem permite criar componentes de seleção dinâmicos e reativos.
Nesta seção, veremos como fazer evento de onChange em select no React JS.
Exemplo:
import React, { useState } from 'react';
function App() {
const [selectedOption, setSelectedOption] = useState('');
const handleSelectChange = (event) => {
setSelectedOption(event.target.value);
};
return (
<div>
<select value={selectedOption} onChange={handleSelectChange}>
<option value="">Selecione uma opção</option>
<option value="option1">Opção 1</option>
<option value="option2">Opção 2</option>
<option value="option3">Opção 3</option>
</select>
<p>Opção selecionada: {selectedOption}</p>
</div>
);
}
export default App;
Neste exemplo, importamos o React e o hook useState, e criamos um componente funcional chamado App.
Semelhante ao exemplo anterior, usamos o hook useState para definir o estado da opção selecionada.
Em seguida, criamos uma função chamada handleSelectChange que serve como nosso manipulador de eventos onChange para o elemento “select”.
Essa função recebe o evento como argumento e atualiza o estado com o valor da opção selecionada.
No componente de retorno, adicionamos um elemento “select” com a propriedade value definida como selectedOption e a propriedade onChange definida como handleSelectChange.
Isso garante que, quando uma opção for selecionada, a função handleSelectChange seja chamada e o estado do componente seja atualizado com a opção selecionada.
Ao seguir esse exemplo, você pode aprender como fazer evento de onChange em select no React JS e criar componentes de seleção dinâmicos e interativos para melhorar a experiência do usuário.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Neste artigo, exploramos como fazer evento de onChange no React JS, um aspecto fundamental para criar aplicações web interativas e dinâmicas.
Aprendemos a criar um manipulador de eventos, anexá-lo a um elemento de entrada e atualizar o estado do componente com base nas alterações do usuário.
Com esse conhecimento, você estará mais bem equipado para criar experiências de usuário ricas e envolventes usando o React.
Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.
Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!