-1

Olá,

Estou realizando uma simples aplicação em ReactJS. Criei alguns botões check, que ao ser clicado muda de cor, porém carrego esses botões em um map e quando clico para mudar a cor de um, muda de todos.

inserir a descrição da imagem aqui

Após clicar em qualquer botão, todos são selecionados.

inserir a descrição da imagem aqui

Essa é a função map que criar os botões:

{botoes.map((title, i) => (
            <GridLabel key={i}>
              {check ? (
                <FaCheckCircle
                  onClick={handleUnchecked}
                  size={24}
                  color="#000"
                  style={{ cursor: 'pointer' }}
                />
              ) : (
                <FaRegCheckCircle
                  onClick={handleCheck}
                  size={24}
                  color="#000"
                  style={{ cursor: 'pointer' }}
                />
              )}
            </GridLabel>
          ))}

Criei uma função para mudar o estado para true, onde muda a cor do botão e outra para voltar ao false, onde o botão volta ao estado inicial.

 const [check, setCheck] = useState(false);

 function handleCheck(e) {
    e.preventDefault();
    setCheck(true);
  }

  function handleUnchecked(e) {
    e.preventDefault();
    setCheck(false);
  }

Pelo que pesquisei, eu preciso armazenar o botão que está sendo clicado, mas não encontro um jeito para realizar isso.

1
  • como você carrega essa lista ou são caixas independentes ???
    – novic
    5/04/2020 às 12:44

1 Resposta 1

0

No map que você descreveu você está usando check (que teoricamente é um boolean) para iterar.

Usar uma variável para guardar o "id" (podemos usar o index se as posições nunca forem mudar) do botão selecionado.

{lista_de_botoes.map((title, i) => (
        <GridLabel key={i}>
          {checkedId === i ? (
            <FaCheckCircle
              onClick={handleUnchecked}
              size={24}
              color="#000"
              style={{ cursor: 'pointer' }}
            />
          ) : (
            <FaRegCheckCircle
              onClick={(e) => handleCheck(e, id)}
              size={24}
              color="#000"
              style={{ cursor: 'pointer' }}
            />
          )}
        </GridLabel>
    ))}



  const [checkId, setCheck] = useState('');

 function handleCheck(e, id) {
    e.preventDefault();
    setCheck(id);
  }

  function handleUnchecked(e) {
    e.preventDefault();
    setCheck('');
  }
1
  • A solução do @mcmartin, parte do principio que você quer um comportamento de radio check, de uma única escolha. E como não está claro na pergunta, é uma forma correta de comportamento. 5/04/2020 às 12:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .