So ändern Sie den Stil beim Klicken auf Reagieren

React implementiert die Methode zum Ändern des Stils beim Klicken: 1. Durch die Rückruffunktion in setState wird die beim Klicken ausgeführte Funktion zum Umschalten des Status realisiert. 2. Durch „

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie ändere ich den Stil beim Klicken auf die Reaktion?

Reagieren Sie durch Klicken/Hovern, um den CSS-Stil zu ändern.

(1) Klicken Sie, um den Stil zu ändern.

Methode 1: (Typoskript-Schreibmethode) Dies kann über den Rückruf in der setState-Funktionsimplementierung erfolgen.

Methode 2: (Klassennamen dynamisch hinzufügen)

Ersetzen Sie das obige Rendering durch das folgende

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>
        );
    }
};

Fügen Sie die entsprechende CSS-Datei hinzu:

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(&#39; &#39;)} onClick={this.handleClick.bind(this)}></Button>
                </Popover>
            </div>
        );
    }

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Stil beim Klicken auf Reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!