0

Estoy tratando de pasar un ejemplo en el que se controla la selección / deselección de varios checkboxes que esta en una clase a hooks, pero no funciona.

En ambos casos tengo un componente Checkbox que no cambia:

import React from "react";

const Checkbox = ({ label, isSelected, onCheckboxChange }) => (
  <div className="form-check">
    <label>
      <input
        type="checkbox"
        name={label}
        checked={isSelected}
        onChange={onCheckboxChange}
        className="form-check-input"
      />
      {label}
    </label>
  </div>
);

export default Checkbox;

El código de partida:

import React, { Component } from "react";
import Checkbox from "./Checkbox";

const checkboxes = {
    "One": false,
    "Two": false,
    "Three": false
};
class App extends Component {

    state = {
        checkboxes
    };

    selectAllCheckboxes = isSelected => {
        Object.keys(checkboxes).map((key, value) => {
            checkboxes[key] = isSelected;
        });

        this.setState({ checkboxes });
    };

    selectAll = () => this.selectAllCheckboxes(true);

    deselectAll = () => this.selectAllCheckboxes(false);

    handleCheckboxChange = changeEvent => {
        console.log('clicked: ' + changeEvent.target)
    };

    createCheckbox = option => (
        <Checkbox
            label={option}
            isSelected={this.state.checkboxes[option]}
            onCheckboxChange={this.handleCheckboxChange}
            key={option}
        />
    );

    createCheckboxes = () => Object.keys(checkboxes).map(this.createCheckbox);

    render() {
        // HACK: traces
        if (this.state !== undefined && this.state.checkboxes !== undefined) {
            console.log(this.state.checkboxes)
        }

        return (
            <form>
                {this.createCheckboxes()}

                <div className="form-group mt-2">
                    <button
                        type="button"
                        className="btn btn-outline-primary mr-2"
                        onClick={this.selectAll}>Select All</button>
                    <button
                        type="button"
                        className="btn btn-outline-primary mr-2"
                        onClick={this.deselectAll}>Deselect All</button>
                </div>
            </form>
        );
    }
}

export default App;

El código que no me funciona:

import React, { useState } from "react";
import Checkbox from "./Checkbox";

function App()
{
    const checkboxes = {
        "One": false,
        "Two": false,
        "Three": false
    }
    const [options, setOptions] = useState(checkboxes)


    const selectAllCheckboxes = isSelected => {
        Object.keys(checkboxes).map((key, value) => {
            checkboxes[key] = isSelected;
        });

        setOptions(checkboxes);
    };

    const selectAll = () => selectAllCheckboxes(true);

    const deselectAll = () => selectAllCheckboxes(false);

    const handleCheckboxChange = changeEvent => {
        console.log('clicked ' + changeEvent.target)
    };

    const createCheckbox = option => (
        <Checkbox
            label={option}
            isSelected={options[option]}
            onCheckboxChange={handleCheckboxChange}
            key={option}
        />
    );

    const createCheckboxes = () => Object.keys(checkboxes).map(createCheckbox);

    return (
        <form>
            {createCheckboxes()}

            <div className="form-group mt-2">
                <button
                    type="button"
                    className="btn btn-outline-primary mr-2"
                    onClick={selectAll}
                >Select All</button>
                <button
                    type="button"
                    className="btn btn-outline-primary mr-2"
                    onClick={deselectAll}
                >Deselect All</button>
            </div>
        </form>
    );
}

export default App;

¿Qué me falta?

3
  • 1
    que es lo que no te funciona exactamente? Creo que el problema está en selectAllCheckboxes deberías pasarle un nuevo objeto a la función setOptions con los nuevos estados a true porque react no "mira" los cambios en el objeto sino que compara referencias. El state debería ser inmutable.
    – hawks
    Commented el 14 oct. 2020 a las 19:17
  • porque en la pregunta pones useEffect si en el código no lo usas?
    – hawks
    Commented el 14 oct. 2020 a las 19:20
  • @hawks el título se ha auto-rellenado de otra pregunta que estuve planteando, creo que en la revisión antes de publicar, porque sí había escrito un nuevo título. Corregido.
    – Orici
    Commented el 14 oct. 2020 a las 20:05

1 respuesta 1

0

El crédito para @hawks que me ha puedo sobre la pista en los comentarios.

Funciona reemplazando la función selectAllCheckboxes():

const selectAllCheckboxes = isSelected => {
    const newCheckboxes = JSON.parse(JSON.stringify(checkboxes));
    Object.keys(checkboxes).map((key, value) => {
        newCheckboxes[key] = isSelected;
    });

    setOptions(newCheckboxes);
};

Donde hago un deep clone del objeto checkboxes para tener un objeto con las mismas propiedades y una dirección en memoria distinta:

const newCheckboxes = JSON.parse(JSON.stringify(checkboxes));

Nota: este tipo de clonado puede hacernos perder datos en ciertos objetos, hay más información sobre el tema en éste hilo: https://stackoverflow.com/a/122704/3919660

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.