Checkbox com Estado e Seleção Múltipla

Introdução

Neste laboratório, aprenderemos como criar uma checkbox (caixa de seleção) com estado e seleção múltipla usando React. Este laboratório irá guiá-lo através do processo de renderização de uma lista de checkboxes, atualização do seu estado e passagem do valor/valores selecionados para o componente pai usando uma função callback. Ao final deste laboratório, você será capaz de criar um componente de checkbox reutilizável que pode ser usado em qualquer projeto React.

Checkbox com Estado e Seleção Múltipla

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Este código renderiza uma lista de checkboxes e envia o(s) valor(es) selecionado(s) para o componente pai usando uma função callback. Aqui estão os passos para criá-lo:

1. Use o hook useState() para inicializar a variável de estado data com a prop options.
2. Crie uma função toggle que atualiza a variável de estado data com a(s) opção(ões) selecionada(s) e chama a função callback onChange com elas.
3. Mapeie a variável de estado data para gerar checkboxes individuais e seus rótulos. Associe a função toggle ao handler onClick de cada checkbox.

const MultiselectCheckbox = ({ options, onChange }) => {
  const [data, setData] = React.useState(options);

  const toggle = (index) => {
    const newData = [...data];
    newData[index] = {
      ...newData[index],
      checked: !newData[index].checked
    };
    setData(newData);
    onChange(newData.filter((item) => item.checked));
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            type="checkbox"
            checked={item.checked || false}
            onChange={() => toggle(index)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

Aqui está um exemplo de como usá-lo:

const options = [{ label: "Item One" }, { label: "Item Two" }];

ReactDOM.createRoot(document.getElementById("root")).render(
  <MultiselectCheckbox
    options={options}
    onChange={(selected) => {
      console.log(selected);
    }}
  />
);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Checkbox com Estado e Seleção Múltipla. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.