J'ai plusieurs emplacements, après vérification de l'emplacement particulier, je peux les pousser dans le tableau en cochant la case impossible de supprimer du tableau
handleChange(e){
if(e.target.checked){
let selectedLocations = this.state.selectedLocations;
selectedLocations.push({
name: e.target.name,
isActive: true
});
this.setState({
selectedLocations: selectedLocations
});
}else{
let selectedLocations = this.state.selectedLocations;
}
}
{
locations && locations.map((el, i) => {
return (
<div className="col-md-4">
<div className="form-group">
<input type="checkbox" value="true" name={el.name} onChange={this.handleChange.bind(this)}/><label> {el.name} </label>
</div>
</div>
)
})
}
Je veux supprimer du tableau après décocher un emplacement particulier
4 Réponses :
Essayez de transmettre l'index de la carte avec la fonction et séparez cette valeur d'index d'un tableau.
Vous pouvez utiliser .filter () . Je suppose que la propriété name est unique mais vous pouvez également stocker une clé pour être plus précis:
this.setState({
selectedLocations: selectedLocations.filter(l => l.name !== e.target.name)
});
@Nathanael, je pense que la réponse devrait être mise à jour en l.name! == e.target.name. La personne qui a voté contre n'a pas pris la peine de vous corriger je crois :).
Vous ne devriez pas essayer de faire muter l'état en poussant directement l'état. Je vous suggère d'essayer quelque chose de similaire comme ci-dessous
handleChange(e){
if(e.target.checked){
this.setState(({selectedLocations}) => ({
selectedLocations: [...selectedLocations, {
name: e.target.name,
isActive: true
}]
}));
} else {
this.setState(({selectedLocations}) => ({
selectedLocations: selectedLocations.filter((element) => (e.target.name !== element.name))
}));
}
}
c'est ce que ma réponse serait, sauf qu'il y a juste quelques problèmes (que je suppose ne sont que de négliger lors du copier-coller): le const selectedLocations ... ne sera pas disponible dans le autre bloc . De plus, je pense qu'il serait préférable d'utiliser la syntaxe de rappel à l'intérieur de setState au lieu de définir un const à partir de l'état. (c'est-à-dire: this.setState (({selectedLocations}) => ({selectedLocations: selectedLocations.filter ((element) => (e.target.name! == element.name))})); < / code> et même idée pour le premier setState )
Utilisez la fonction de suppression de lodash
handleCheckboxChange = (e, id) => {
const { selected_ids } = this.props;
let updated_selected_ids = [];
if (e.target.checked) {
updated_selected_ids = selected_ids.concat([id]);
} else {
updated_selected_ids = selected_ids.filter(function(n){ return n !== id })
}
Si vous ne souhaitez pas utiliser lodash, vous pouvez utiliser filter également.
handleCheckboxChange = (e, id) => {
const { selected_ids } = this.props;
let updated_selected_ids = [];
if (e.target.checked) {
updated_selected_ids = selected_ids.concat([id]);
} else {
updated_selected_ids = remove(selected_ids, n => n !== id);
}
}
vous avez défini un état dans une condition else, puisque vous utilisez le même
selectedLocationsvotre résultat reste inchangé, vous devez également considérer que lesemplacementsdoivent être mis à jour en synchronisation avecselectedLocations, je suppose parce que vous n'avez pas posté le code complet.