Maison >interface Web >Questions et réponses frontales >Comment changer le style en cliquant sur React
React implémente la méthode de changement de style en cliquant : 1. Via la fonction de rappel dans setState pour réaliser la fonction exécutée en cliquant pour changer d'état ; 2. Via "
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Comment changer le style au clic en réaction ?
Réagissez en cliquant/survolez pour modifier le style CSS
(1) Cliquez pour modifier le style
Méthode 1 : (méthode d'écriture dactylographiée)
type state = { selected: boolean; }; class Measurement extends Component<{}, state> { constructor(props:any) { super(props); this.state = { selected: false }; } handleClick = (e:any) => { this.setState({ selected: !this.state.selected }, () => { if(!this.state.selected){ this.clearAll(); } }); } private rightBtnStyle: CSSProperties = { background:"url(/assets/images/3.png) no-repeat center", border: "none", color: "white" }; private rightBtnStyle2: CSSProperties = { background:"url(/assets/images/1.png) no-repeat center", border: "none", color: "white" }; //省略具体功能 render() { var currentstyle; if(this.state.selected){ currentstyle=this.rightBtnStyle2; } else{ currentstyle=this.rightBtnStyle; } return( <div className="tool-widget"> <Popover placement="left" content={this.content} trigger="click"> <Button className="right-btn" style={currentstyle} onClick={this.handleClick.bind(this)}></Button> </Popover> </div> ); } };
PS : La fonction exécutée en cliquant pour changer d'état ici peut être effectué via le rappel dans l'implémentation de la fonction setState.
Méthode 2 : (Ajouter dynamiquement un nom de classe)
Remplacez le rendu ci-dessus par le suivant
render() { return ( <div className="tool-widget" id="Measurement"> <Popover placement="left" content={this.content} trigger="click"> <Button className={["right-btn", this.state.selected ? "active":null].join(' ')} onClick={this.handleClick.bind(this)}></Button> </Popover> </div> ); }
Ajoutez le fichier CSS correspondant :
#Measurement { .right-btn{ background:url(./images/3.png) no-repeat center; border:none; color: white; width:100%; height: 100% } .right-btn.active{ background:url(./images/1.png) no-repeat center; } }
Apprentissage recommandé : "Tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!