Como usar radio buttons em React JS?

Neste artigo você aprenderá a como utilizar radio buttons em React JS, um input muito importante dos formulários

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Os radio buttons são uma forma eficaz de oferecer aos usuários uma lista de opções limitadas a uma única seleção.

Em React JS, é comum encontrar desenvolvedores lutando para gerir o estado desses elementos de formulário.

Neste artigo, você aprenderá como lidar com radio buttons em React JS de maneira otimizada e moderna.

Compreendendo o Funcionamento dos Radio Buttons

Radio buttons funcionam como um grupo de botões que permite ao usuário escolher apenas uma opção entre várias.

Quando o usuário seleciona um novo radio button, o anteriormente selecionado é automaticamente desmarcado.

Inicializando o Componente com Estado

O primeiro passo para gerir radio buttons em React JS é criar um estado para o valor selecionado.

Utilizaremos os Hooks do React, especialmente useState, para armazenar esta informação.

Exemplo Básico com useState

import React, { useState } from 'react';

const RadioButtons = () => {
  const [valorSelecionado, setValorSelecionado] = useState('');

  return (
    // código do componente
  );
}

Implementando os Radio Buttons

Agora que temos o estado inicial, podemos começar a implementar os radio buttons.

Lembre-se de que, para que funcionem como um grupo, todos os radio buttons devem ter o mesmo atributo name.

Exemplo de Radio Buttons

const RadioButtons = () => {
  const [valorSelecionado, setValorSelecionado] = useState('');

  const handleChange = (event) => {
    setValorSelecionado(event.target.value);
  };

  return (
    <form>
      <label>
        <input
          type="radio"
          value="opcao1"
          checked={valorSelecionado === 'opcao1'}
          onChange={handleChange}
        />
        Opção 1
      </label>
      <label>
        <input
          type="radio"
          value="opcao2"
          checked={valorSelecionado === 'opcao2'}
          onChange={handleChange}
        />
        Opção 2
      </label>
      <label>
        <input
          type="radio"
          value="opcao3"
          checked={valorSelecionado === 'opcao3'}
          onChange={handleChange}
        />
        Opção 3
      </label>
    </form>
  );
}

Melhorando a Reutilização

O exemplo acima é funcional, mas podemos torná-lo mais reutilizável.

Em vez de codificar as opções diretamente, podemos armazená-las em um array e mapeá-las para renderizar os radio buttons.

Exemplo com Reutilização

const RadioButtons = () => {
  const [valorSelecionado, setValorSelecionado] = useState('');
  const opcoes = ['opcao1', 'opcao2', 'opcao3'];

  const handleChange = (event) => {
    setValorSelecionado(event.target.value);
  };

  return (
    <form>
      {opcoes.map(opcao => (
        <label key={opcao}>
          <input
            type="radio"
            value={opcao}
            checked={valorSelecionado === opcao}
            onChange={handleChange}
          />
          {opcao}
        </label>
      ))}
    </form>
  );
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Neste artigo, vimos como implementar radio buttons em React JS de maneira otimizada e moderna.

Utilizamos os Hooks de estado para gerir as seleções e garantimos que nosso componente seja reutilizável e fácil de manter.

Além disso, aprendemos a importância de usar o mesmo nome para os radio buttons para que funcionem como um grupo e de gerir o estado da seleção através do React.

Estes passos são fundamentais para criar uma interface de usuário intuitiva e eficaz.

Lembrando sempre que a melhor prática é fazer uso dos recursos mais modernos e otimizados que a biblioteca React JS oferece, asseguramos que o nosso código seja eficiente, legível e fácil de manter.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Como deixar um radio button marcado por padrão:

Muita gente esbarra nisso: abre o formulário e quer que uma opção já venha selecionada

O segredo é passar o valor inicial direto no useState, em vez de deixar a string vazia

Como o checked de cada input compara o estado com o próprio value, o React já marca a Opção 1 assim que o componente monta

Simples assim, sem precisar mexer no HTML =)

Pegando o valor selecionado no envio do formulário:

Controlar o estado é meio caminho, mas na prática você quer usar essa escolha em algum lugar

Basta ler valorSelecionado dentro do envio do form:

const handleSubmit = (event) => { event.preventDefault(); console.log(‘Opção escolhida:’, valorSelecionado); };

E ligar o handler no form, com um botão de envio:

<form onSubmit={handleSubmit}> {/ seus radio buttons aqui /} <button type="submit">Enviar</button> </form>

Agora o valor que o usuário marcou está disponível pra você mandar pra uma API, salvar no estado global ou o que precisar

Perguntas frequentes sobre radio buttons em React:

Radio input e radio button são a mesma coisa?

Sim, é o mesmo elemento: um input com type="radio", também chamado de radio button

A diferença é só de nome, o comportamento e o código são idênticos

Por que meus radio buttons não desmarcam sozinhos?

Esse é o erro clássico: quando os inputs não têm o mesmo atributo name, o navegador os trata como grupos separados

Garanta o mesmo name em todos e deixe o React controlar quem está marcado pelo checked

Qual a diferença entre radio button e checkbox?

Radio button é pra escolha única dentro de um grupo, só uma opção fica ativa por vez

Checkbox é pra múltiplas seleções independentes, cada um liga e desliga sozinho

Como deixar o radio button obrigatório?

Você pode iniciar o estado com uma opção já marcada (assim nunca fica vazio) ou validar valorSelecionado antes do envio, bloqueando o submit se ainda estiver em branco