Neste artigo você aprenderá a como deixar uma option selecionada no React JS, uma ação muito comum nos projetos web!
Fala programador(a), beleza? Bora aprender mais sobre React!
O controle de formulários é um aspecto essencial em muitas aplicações web.
Neste artigo, vamos explorar uma questão comum enfrentada por muitos desenvolvedores React: como deixar uma opção selecionada por padrão em um elemento select?
Se você está familiarizado com HTML, você pode se perguntar: “não posso apenas adicionar o atributo selected a uma opção?”
No React, no entanto, as coisas funcionam um pouco diferente. Vamos discutir o porquê e como lidar com isso.
O Elemento Select no React
Em HTML padrão, o atributo ‘selected’ é usado para definir a opção padrão em um elemento select. No React, no entanto, o valor do select é controlado pelo estado do componente.
Isso significa que o valor selecionado deve ser definido no estado do componente e depois vinculado ao elemento select.
Assim, o React controla o estado do elemento select, tornando-o um componente controlado.
Aqui está um exemplo básico de como um elemento select pode ser renderizado em um componente funcional React com Hooks:
import React, { useState } from 'react';
const SelectExample = () => {
const [selectedOption, setSelectedOption] = useState('');
const handleChange = (event) => {
setSelectedOption(event.target.value);
}
return (
<select value={selectedOption} onChange={handleChange}>
<option value="">Selecione...</option>
<option value="option1">Opção 1</option>
<option value="option2">Opção 2</option>
<option value="option3">Opção 3</option>
</select>
);
}
Definindo uma opção pré-selecionada
Se você deseja ter uma opção pré-selecionada quando o componente for renderizado, você pode simplesmente definir o estado inicial para o valor dessa opção.
Aqui está como você pode fazer isso:
import React, { useState } from 'react';
const SelectExample = () => {
const [selectedOption, setSelectedOption] = useState('option2');
const handleChange = (event) => {
setSelectedOption(event.target.value);
}
return (
<select value={selectedOption} onChange={handleChange}>
<option value="option1">Opção 1</option>
<option value="option2">Opção 2</option>
<option value="option3">Opção 3</option>
</select>
);
}
Neste exemplo, a opção “Opção 2” estará selecionada por padrão quando o componente for renderizado, porque o estado inicial ‘selectedOption’ é definido como ‘option2’.
Lidando com múltiplas opções selecionadas
Se você deseja permitir que múltiplas opções sejam selecionadas, você pode fazer isso alterando o elemento select para aceitar múltiplos valores e alterando o estado para armazenar um array de opções selecionadas.
import React, { useState } from 'react';
const SelectExample = () => {
const [selectedOptions, setSelectedOptions] = useState(['option1', 'option2']);
const handleChange = (event) => {
const selected = Array.from(event.target.options)
.filter(option => option.selected)
.map(option => option.value);
setSelectedOptions(selected);
}
return (
<select multiple={true} value={selectedOptions} onChange={handleChange}>
<option value="option1">Opção 1</option>
<option value="option2">Opção 2</option>
<option value="option3">Opção 3</option>
</select>
);
}
Neste exemplo, as opções ‘Opção 1’ e ‘Opção 2’ estarão selecionadas por padrão, porque o estado inicial ‘selectedOptions’ é definido como [‘option1’, ‘option2’].
Trabalhando com dados dinâmicos
Agora que temos uma compreensão básica de como deixar uma opção selecionada no React, é importante mencionar que muitas vezes você estará trabalhando com dados dinâmicos.
Por exemplo, as opções em seu elemento select podem ser originárias de uma chamada de API.
Nesse caso, o estado inicial pode não estar disponível imediatamente. Assim, o valor inicial do estado pode ser definido como null ou vazio, e então alterado uma vez que os dados estejam disponíveis.
import React, { useState, useEffect } from 'react';
const SelectExample = () => {
const [selectedOption, setSelectedOption] = useState('');
const [options, setOptions] = useState([]);
useEffect(() => {
// Simulando uma chamada de API
setTimeout(() => {
setOptions(['option1', 'option2', 'option3']);
setSelectedOption('option2');
}, 2000);
}, []);
const handleChange = (event) => {
setSelectedOption(event.target.value);
}
return (
<select value={selectedOption} onChange={handleChange}>
{options.map((option, index) => <option key={index} value={option}>{option}</option>)}
</select>
);
}
Seleção de Opções Aninhadas
Outra situação comum é ter que gerenciar a seleção de opções aninhadas, onde a seleção de uma opção determina as opções disponíveis em uma seleção subsequente.
Neste caso, o estado inicial de ambas as seleções pode ser vazio e, em seguida, o estado da segunda seleção pode ser alterado com base na seleção da primeira.
import React, { useState } from 'react';
const SelectExample = () => {
const [firstSelection, setFirstSelection] = useState('');
const [secondSelection, setSecondSelection] = useState('');
const [secondOptions, setSecondOptions] = useState([]);
const firstOptions = ['option1', 'option2', 'option3'];
const handleChangeFirst = (event) => {
setFirstSelection(event.target.value);
// Defina as opções de segunda seleção com base na primeira seleção
switch (event.target.value) {
case 'option1':
setSecondOptions(['option1.1', 'option1.2']);
break;
case 'option2':
setSecondOptions(['option2.1', 'option2.2']);
break;
case 'option3':
setSecondOptions(['option3.1', 'option3.2']);
break;
default:
setSecondOptions([]);
}
}
const handleChangeSecond = (event) => {
setSecondSelection(event.target.value);
}
return (
<div>
<select value={firstSelection} onChange={handleChangeFirst}>
{firstOptions.map((option, index) => <option key={index} value={option}>{option}</option>)}
</select>
<select value={secondSelection} onChange={handleChangeSecond}>
{secondOptions.map((option, index) => <option key={index} value={option}>{option}</option>)}
</select>
</div>
);
}
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Chegamos ao fim do artigo sobre como deixar a option selecionada no React JS!
A seleção de opções em um elemento select no React é um pouco diferente do que você pode estar acostumado com o HTML padrão, mas com a compreensão do conceito de componentes controlados, fica bastante simples.
Ao gerenciar o valor selecionado através do estado do componente, você pode ter um controle mais preciso sobre o comportamento do seu formulário, permitindo uma experiência de usuário mais fluida e reativa.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.