anteriorpróximo
Aula 12
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

# Resumo do Tutorial sobre Componente Select Controlado em React

Neste vídeo, aprendemos a criar um componente `<select>` controlado em React. A seguir, estão os principais pontos abordados:

## 1. Estrutura HTML do Select
- A tag `<select>` é utilizada para criar uma lista de opções.
- Cada `<option>` pode ter um `value` e um atributo `selected` para definir a opção padrão.

## 2. Implementação em React
- No React, o valor do `<select>` pode ser controlado através do estado do componente, facilitando a seleção da opção.
- Para definir a opção selecionada por padrão, simplesmente passamos o valor correspondente do estado ao atributo `value` do `<select>`.

## 3. Tornando o Componente Controlado
- Para um componente `<select>` ser controlado, devemos:
  - Definir um estado que irá armazenar o valor selecionado (ex: `país`).
  - Implementar uma função `onChange` para capturar a seleção.

### Exemplo de Estado e onChange:
```javascript
const [pais, setPais] = useState(""); // Estado inicial vazio

const handleChange = (event) => {
    setPais(event.target.value); // Atualiza o estado com o valor selecionado
};

4. Funcionamento do Componente

  • Ao alterar a seleção, o estado é atualizado, e o valor do <select> se ajusta automaticamente à nova seleção.
  • De modo semelhante aos botões de rádio, apenas uma opção pode ser selecionada por vez.

5. Dicas e Observações

  • Para depuração, é útil utilizar console.log para verificar o valor do estado e do evento.
  • Se não houver seleção inicial, podemos deixar o valor do estado vazio, ou setar um valor padrão.

Conclusão

  • Um componente <select> controlado em React é implementado através do gerenciamento de estado e atualização via onChange.
  • A faixa de opções e o comportamento são consistentes com os outros campos de formulário, como botões de rádio e checkboxes.

Nota: Lembre-se que não é necessário usar o atributo selected no <option> ao trabalhar com componentes controlados em React; basta definir o value no <select>.

Scroll down above for more

Video Transcript

Agora vamos continuar aprendendo a ver de sobrecomponent select que vai ser o último que nós vamos aprender a tornar controlado nesses set de vídeos então vamos olhar nos primeiros a dar uma olhada no HTML puro tem a tag select você dá um nome e tem várias options né opções cada opção pode ter o valor e tem aqui o level normalmente entre as tags então senote que se você quiser selecionar um uma dessas opções você tem que usar select esse atributo chamado selector se tiver o atributo essa opção será selecionada por padrão está bom esse é o HTML puro vamos copiar isso para o react depois das botões de rádio o adicionar os aqui um dos detalhes da select no react é que em vez de ter aqui porque por exemplo primeiro vamos analisar ali botar um br aqui para ver aumentar e aqui nesse caso você tem várias escolhas e o teu selector no japan por isso que foi selecionado se eu remover o que acontece vamos ver o brasil que é a primeira opção vai ser selecionado por default né por quadrão inicialmente se eu selecionar united states adicionar o selector vai ser united states e assim por diante mas no react fica muito mais fácil em vez de botar select a gente só precisa definir o vale para o select aqui dessa maneira por exemplo se o vale for e os os vai ser estados unidos selecionado por padrão se valor for jp japan vai ser selecionado por padrão e se pude acho dessa maneira a gente não precisa ter que adicionar select e procurar a opção para adicionar select fica muito mais fácil no react você pode só definir o valor da própria select do componente select e vai já se adicionar o selector para a opção que for correspondente ao valor a bom deixa o sol esse o warning aqui que é que é isso você dê um valor sem definir um change e essas coisas lá lá lá e a gente quer tornar esse componente controlado também a gente como a gente vai fazer isso a gente vai controlar o valor aqui também definir um change né e então vamos definir o valor aqui vamos definir o estado senhora que a gente também só pode fazer uma escolha né da mesma maneira que o botão de rádio das escolhas disponíveis somente uma escolha pode ser selecionada então a gente só pode escolher um então da mesma maneira vai ser esse muito parecido com a botão de rádio então vamos definir o valor no estado aqui vamos definir como não se esqueça virgula país eu botei sem assento se quiser adicionar assento depende de você e aí por padrão se adicionar vamos ver se o que acontece se eu deixar a vazia vai ser só um string né que o valor é uma string voltando aqui o value em vez de jpe vai ser 10 pontos state ponto vale a desculpa ponto país primeiro primeiro passo em fazer o componente ser controlado pelo briato então senor que eu botei uma string vazia mas ele ainda assinou a primeira opção que acontece se eu adicionar uma dummy aqui só ok então se eu adicionar essa dummy fica selecionado por padrão se você quiser deixar essa opção vazia pode ser também vamos mudar o state para brr ver o que acontece lá em cima no state país br salvo o rato relouz se assinou o brasil vamos botar jpe se assinou japan nihon então tem tudo certo né o valor está sendo controlado deixa eu voltar ali e definir a on change agora o próximo passo é definir a on change vamos lá a on change vai ser o que vamos seguir vou seguir meu próprio padrão padrão de nomeamento nomear a on país change depois de definir aqui de conectar vamos definir um país change a gente vamos dar um console logo para ver o que acontece a venda target quem é o target quem é o alvo aqui vamos mudar e ver o que acontece mudei para os estados unidos o alvo é o próprio select aqui não sei o que tem várias coisas aqui não é mudei para o brasil vou ver o próprio select o seu metade aqui senão acho que ele seleciona a mesma coisa para o target mas o que será que tem no value isso que eu quero saber vamos lá seleciona united states us em brasil br opa está errado não sempre fica no japan porque será porque a gente não deu set state ainda né porque voltando aqui senote que o valor está sendo controlado pelo estado nesse caso desse ponto state pais país é sempre jp e não é modificado não é atualizado porque o nosso on change não faz nada mas a gente sabe que valor foi selecionado porque console logo é para essa aqui então só resta a gente dar o set state para o novo país país agora vai ser avan target.value né então vamos ver está japan o brasil senote br e também agora o brasil apareceu na lista a opção que foi selecionada vamos nos estados unidos united states us e apareceu selecionado japan sim por diante e é só isso então o set state gravente target.value mesma coisa do radio né se quiser confirmar que o estado está mudando porque a gente já confirmou porque a escolha muda você pode dar um console logo aqui do estado state país vai dar na mesma us brasil irrom e assim por diante senote se eu remover dar um console logo de todo estado vamos ver o que acontece salvei todo estado é um objeto senote paes e us qualizou novo estado país br sem por diante gênero masculino feminino gênero feminino país e us sem por diante então está funcionando isso como se faz select componente controlado select no react então avisando que para select no react não precisa usar o atributo selected é só definir value no próprio select fica muito mais fácil para fazer para controlar o componente da mesma maneira do mesmo mesmo maneira que a gente fez antes primeiro define o valor para ser o valor que está dentro do estado variável de estado e define o on change segundo passo para finalmente tornar o componente controlado define a sua função on change que muda o estado normalmente vai ser avan.target.value o valor ou no caso da checkbox vai ser o cadê a radio foi o mesmo valor e aqui também foi o mesmo né value value um pouco mais complicado para checkbox porque tem várias escolhas a gente tem que ver qual escolha já está relacionada ou não value para o nome e sem por diante quando você não saber claramente o que fazer começa da mesma maneira que a gente começou o primeiro da consolo do event.targer para saber qual é o alvo qual é a componente que essa é selecionado quando você o qual componente que causa o evento e depois disso você pode ver os valores o value ou outra variável que será usada para definir o novo valor assim por diante e define o set state chama o set state para atualizar o estado do componente você sempre põe os variáveis aqui se não tiver escolho pode botar string vazia para ser vazio mas se quiser dar um valor inicial só adicionar aqui nesse caso o masculine for inicial a gente não precisa fazer isso só deixar a string vazia e se quiser mudar a banana para ser padrão inicialmente selecionado só botar true você vê já está selecionada e sim por diante
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir