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?
selectAllCheckboxes
deberías pasarle un nuevo objeto a la funciónsetOptions
con los nuevos estados atrue
porque react no "mira" los cambios en el objeto sino que compara referencias. El state debería ser inmutable.useEffect
si en el código no lo usas?