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

0
A.Burdonskaya 3 nov. 2019 à 20:07

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

0
Oleksandr Paiziak 3 nov. 2019 à 17:24

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')}
1
ssBarBee 3 nov. 2019 à 17:20