Skip to main content
título editado
Enlace
Orici
  • 7.8k
  • 13
  • 50
  • 89

Ejemplo uso de hooks ReactJs - useEffect no funciona Problema para controlar checkboxes con React Hooks

Origen Enlace
Orici
  • 7.8k
  • 13
  • 50
  • 89

Ejemplo uso de hooks ReactJs - useEffect no funciona

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?