Hey Guys J'essaie d'attribuer une touche sur ma chechbox Sélectionnez tous les boutons pour retourner l'état lorsque vous cliquez sur le bouton mais je fais quelque chose de mal. Quelqu'un peut-il m'aider?
mon état: ma seule case à cocher: MES Sélectionnez toutes les cases: < Pré> XXX Le problème est que, peu importe ce que je fais, l'état reste le même. Il ne se retourne pas trop vrai ou faux. update < Strong> Mise à jour 
3 Réponses :
HI votre gestionnaire de case à cocher doit être sur le constructeur.
Comme ci-dessous: et vous avez écrit coché = {the.handleallkeckboxes? VRAI: FALSE} QUI AVEC LE FONNE DU FONNE.PLA* Ceci.L'HandleAllCheckboxes est déjà défini et il reviendra donc toujours vrai. (Parce que la fonction est toujours disponible.) **. Deuxièmement, Handleallcheckboxes ne renvoie pas non plus vrai / faux.
Hey @pramod nikam de cette façon je reçois toujours une valeur de la vérité
On dirait que ça. vrai: faux est un problème
coché = {this.state.Alleckboxese} Je le retournez pour renvoyer la réponse de l'état, mais la réponse de la console est valable.
Vérifier l'orthographe aussi
Qu'est-ce qui est sorti de console.log (AllcheckboxSchecked)?
J'ai mis à jour ma question que vous pouvez voir la réponse de la console
Tout d'abord, vos boîtes de mainLeallCheckbox = (e) => {Fonction se font appeler?
Laissez-nous Continuez cette discussion en chat .
Vous devez conserver vos cases à cocher State dans l'état, lorsque vous cliquez sur Sélectionner tout ce qui change d'état sur true et Vise Versa.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
checkBoxes: {
vehicle1: false,
vehicle2: false,
vehicle3: false,
}
};
}
handleCheckBoxes = (checkBox, checkAll = false) => {
if (checkAll) {
const checkBoxes = { ...this.state.checkBoxes };
Object.keys(checkBoxes).forEach((key) => {
checkBoxes[key] = checkBox.target.checked;
});
this.setState({
checkBoxes: checkBoxes
})
return;
}
const { checked, name } = checkBox.target;
this.setState(
prevState => {
return {
checkBoxes: { ...prevState.checkBoxes, [name]: checked }
};
},
() => console.log(this.state)
);
// console.log(checkBox.target.checked);
};
render() {
return (
<div>
<label>
<input
type="checkbox"
onChange={e => this.handleCheckBoxes(e, true)}
name="vehicle1"
value="Bike"
/>
Select All
</label>
<br />
<input
type="checkbox"
onChange={this.handleCheckBoxes}
name="vehicle1"
value="Bike"
checked={this.state.checkBoxes["vehicle1"]}
/>
<input
type="checkbox"
onChange={this.handleCheckBoxes}
name="vehicle2"
value="Car"
checked={this.state.checkBoxes["vehicle2"]}
/>
<input
type="checkbox"
onChange={this.handleCheckBoxes}
name="vehicle3"
value="Boat"
checked={this.state.checkBoxes["vehicle3"]}
/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>Il y a un paquet Coques de contrôle groupé qui peut résoudre ce problème .
Vous pouvez simplement envelopper les cases à cocher dans un groupe de cocher et ajouter un Allchecker. Plus d'exemples Voir https://codesandbox.io/s/grouped-checkboxes-v5sww
Comment gardez-vous l'état pour chaque case à cocher?