J'ai 4 boutons, pour chacun desquels j'ai appliqué les fonctions suivantes:
handleStip() {
this.setState({isStipOpen: !this.state.isStipOpen, isBookmarkOpen: false, isDonateOpen: false});
}
handleBookmark() {
this.setState({isBookmarkOpen: !this.state.isBookmarkOpen, isStipOpen: false, isDonateOpen: false});
}
handleDonate(){
this.setState({isDonateOpen: !this.state.isDonateOpen, isStipOpen: false, isBookmarkOpen: false});
}
Je n'ai aucun problème avec la fonctionnalité. Le principal problème est la taille. Par exemple, maintenant je dois ajouter 2 boutons supplémentaires, en copiant et collant à nouveau tous ces états.
Existe-t-il une manière plus élégante de résoudre ce problème? Merci
2 réponses
Peut-être que vous pouvez créer une fonction qui créera un objet avec de fausses valeurs
const prepareData = () => ({
isStipOpen: false
isBookmarkOpen: false,
isDonateOpen: false
});
handleEvent(type) {
this.setState({...this.prepareData(), [type]: !this.state[type]});
}
Mais je ne connais pas ta logique, peut-être que ça ne marchera pas
Selon le commentaire ci-dessus, nous pouvons utiliser le paramètre type
Que diriez-vous de créer une fonction générique qui peut recevoir la clé que vous souhaitez basculer. Créez une copie d'état. Répétez toutes les clés et définissez-les sur false. Réglez la clé en question pour basculer l'état.
handleButtonStateChange = (toggleKey) => {
const stateCopy = {...this.state}
Object.keys(stateCopy).forEach(key => stateCopy[key] = false)
stateCopy[toggleKey] = !stateCopy[toggleKey]
this.setState(stateCopy);
}
Usage
onChange={() => this.handleButtonStateChange('isBookmarkOpen')}
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.